使用jQuery动态添加'divs'

debugcn 发表于 Dev

牙胶

这是我编写的脚本。第一次单击功能可以正常工作，但其他两个则无法正常工作。标记遵循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;
  });

Bk圣地亚哥

如果元素是动态创建的，则使用的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将限制它在查找它的范围。

希望能帮助到你。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。