Question

这是我写的脚本。第一个单击功能工作正常，但其他两个不能按预期工作。标签遵循href链接，其单击功能不起作用。是因为它们是由jQuery创建的，而不是在原始的html页面中？

$("#edit-description").click(function(){
    $("#add-description").replaceWith( "<div id='add-description'><textarea cols='43' rows='9' placeholder='Add a description...'></textarea><a href='#' class='u-update'>Update</a><a href='#' id='add-description-cancel'>Cancel</a></div>" );
    return false;
  }); 

  $("#add-description-cancel").click(function(){
    $("#add-description").replaceWith( '<div id="add-description">Write a <a href="/#" id="edit-description">description</a> about the college.</div>');
    return false;
  }); 

  $(".u-update").click(function(){
    $("#add-description").replaceWith( '<div id="add-description">Write a <a href="/#" id="edit-description">description</a> about the college.</div>');
    return false;
  });

Answer 1

如果已动态创建元素，请使用delegate

的jquery函数

将您的第二和第三个代码更改为。

$("body").delegate("#add-description-cancel", "click", function(){
    $("#add-description").replaceWith( '<div id="add-description">Write a <a href="/#" id="edit-description">description</a> about the college.</div>');
    return false;
  }); 

$("body").delegate(".u-update", "click", function(){
    $("#add-description").replaceWith( '<div id="add-description">Write a <a href="/#" id="edit-description">description</a> about the college.</div>');
    return false;
});

请注意，您可以将选择器$("body")更改为内部内容，例如在页面呈现期间创建的元素的父级，以便jquery将限制其查找范围。

希望它有所帮助。

Answer 2

使用on代替委托作为首选方法。

根据文件

从jQuery 1.7开始，.delegate（）已被.on（）方法取代

http://api.jquery.com/delegate/

经验法则，无论何时动态添加内容，都要使用事件委派而不是直接事件分配

Answer 3

* 如果您使用的是jquery 1.7.2 *

  $("body").delegate("#edit-description",'click',(function(){
    $("#add-description").replaceWith( "<div id='add-description'><textarea cols='43' rows='9' placeholder='Add a description...'></textarea><a href='#' class='u-update'>Update</a><a href='#' id='add-description-cancel'>Cancel</a></div>" );
    return false;
  }); 

 $("body").delegate("#add-description-cancel",'click',(function(){
    $("#add-description").replaceWith( '<div id="add-description">Write a <a href="/#" id="edit-description">description</a> about the college.</div>');
    return false;
  }); 

$("body").delegate(".u-update",'click',(function(){
    $("#add-description").replaceWith( '<div id="add-description">Write a <a href="/#" id="edit-description">description</a> about the college.</div>');
    return false;
  });

* 如果您使用的是jquery 1.10.2 *

    $(document).on("#edit-description",'click',(function(){
    $("#add-description").replaceWith( "<div id='add-description'><textarea cols='43' rows='9' placeholder='Add a description...'></textarea><a href='#' class='u-update'>Update</a><a href='#' id='add-description-cancel'>Cancel</a></div>" );
    return false;
  }); 

   $(document).on("#add-description-cancel",'click',(function(){
    $("#add-description").replaceWith( '<div id="add-description">Write a <a href="/#" id="edit-description">description</a> about the college.</div>');
    return false;
  }); 

   $(document).on(".u-update",'click',(function(){
    $("#add-description").replaceWith( '<div id="add-description">Write a <a href="/#" id="edit-description">description</a> about the college.</div>');
    return false;
  });

使用jQuery动态添加'divs'

3 个答案: