使用jQuery动态添加'divs'

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将限制它在查找它时的范围.

希望能帮助到你.