Javascript 动态添加'；divs'；使用jQuery

这是我写的剧本。第一次单击功能可以正常工作，但其他两个功能不能按预期工作。标签跟随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;
  }); 

$（“#编辑说明”）。单击（函数（）{
$（“#添加说明”）。替换为（“”）；
返回false；
}); 
$（“#添加说明取消”）。单击（函数（）{
$（“#添加说明”）。替换为（‘写一篇关于学院的文章’）；
返回false；
}); 
$（“.u-update”）。单击（函数（）{
$（“#添加说明”）。替换为（‘写一篇关于学院的文章’）；
返回false；
}); 

如果元素是动态创建的，则使用

jquery的
delegate
功能

将第二个和第三个代码更改为

$("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”）.delegate（#添加描述取消”，“单击”，函数（）{
$（“#添加说明”）。替换为（‘写一篇关于学院的文章’）；
返回false；
}); 
$（“body”）.delegate（“.u-update”，“click”，function（）{
$（“#添加说明”）。替换为（‘写一篇关于学院的文章’）；
返回false；
}); 

请注意，您可以将选择器
$（“body”）
更改为类似于在页面呈现期间创建的元素父级的内部内容，这样jquery将限制其查找范围

希望有帮助。
使用on而不是delegate，因为on是首选方法

根据文件

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


根据经验，无论何时动态添加内容，如果使用jquery 1.7.2*

$（“body”）.delegate（#编辑说明“，“单击”），（函数（）{
$（“#添加说明”）。替换为（“”）；
返回false；
}); 
$（“body”）.delegate（#add description cancel“，“click”，（function（）{
$（“#添加说明”）。替换为（‘写一篇关于学院的文章’）；
返回false；
}); 
$（“body”）.delegate（“.u-update”，“click”，（function（）{
$（“#添加说明”）。替换为（‘写一篇关于学院的文章’）；
返回false；
}); 

*如果您使用的是jquery 1.10.2*

$（文档）。在（#编辑描述“，”单击“，（函数（）{
$（“#添加说明”）。替换为（“”）；
返回false；
}); 
$（文档）。在（#添加描述取消“，”单击“，（函数（）{
$（“#添加说明”）。替换为（‘写一篇关于学院的文章’）；
返回false；
}); 
$（文档）。在（“.u-update”上，'click'，（函数（）{
$（“#添加说明”）。替换为（‘写一篇关于学院的文章’）；
返回false；
});
Thanx！正是我所需要的。如果答案合适，您可以批准它。：）但是，现在有另一个问题。“添加描述取消”再次动态创建第一个div。现在它也有同样的问题。那么，我是否也应该添加“delegate”函数？要批准，我需要再等几分钟：如果使用jQuery 1.7+，请使用Dbetter use和“使用事件委派而不是事件处理程序”事件委派是将事件处理程序绑定到元素的祖先，而不是将处理程序直接绑定到元素。在这两种情况下，您都在使用事件处理程序。@FelixKling我的意思是直接事件分配，所以应该是“而不是直接事件分配”或者你会怎么说？谢谢你的信息是的，那会更好！
  $("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;
  }); 

    $(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;
  });