Javascript Jquery附加了样式和函数

我在按钮上附加了一些ID，并使用这些ID来制作点击内容 当它附加时，按钮（）没有生效 点击它，不要使用我为这个按钮id创建的函数

$("button#edit-doc").each(function() {
   $(this).button();
   $(this).on("click", function(){
       alert("clicked");
   });
});

附加按钮

$("#append").on("click", function(){
     $('div#container').append("<button id='edit-doc'> Edit </button>");
});

$（“#追加”）。在（“单击”，函数（）{
$（'div#container'）。追加（“编辑”）；
});

容器

<div id="container"></div>

---

这似乎就是你想要的：

function handler() { alert('clicked'); }

$("#append").on("click", appendButton);

function appendButton(){
    $('#container').append(function() {
      return $("<button id='edit-doc'> Edit </button>").on("click", handler);
    })
}

函数处理程序（）{alert（'clicked'）；}
$（“追加”）。在（“单击”，追加按钮）；
函数appendButton（）{
$（“#容器”）.append（函数（）{
在（“单击”，处理程序）上返回$（“编辑”）；
})
}

有关此行为的详细信息，请参阅

$(document).on("click", "#selector", function(){
    //Your code here.
}); 

将文档用于

选择器

和

.on

将允许您将事件绑定到动态创建的元素。当DOM元素在执行之前不存在时，这是我发现的唯一方法

我是在一个动态创建的表中完成这项工作的，该表可以排序并且工作得很好

编辑：

这里有一个例子。单击按钮添加

div

，然后单击

div

以获取其内容

---

第一个代码块使用class='edit-doc'将事件列表器附加到所有按钮，使用类而不是id，因为id的名称每页只能存在一次。所以我是说，当你的浏览器到达这个代码时，一个事件列表器会被添加到你文档中所有可用的按钮中。它不会向稍后单击某个元素时将要添加的按钮添加事件列表器，因为它不知道。对于附加的按钮，必须再次显式执行代码。但您不希望在原始按钮中添加新的事件列表器，从而导致调用两个事件

比如：

// Load all buttons with class=edit-doc and add event listner
$(function() {
    $("button.edit-doc").button().on("click", function(){
        alert("clicked");
    });
});

// Append button if button with id=append is clicked
$("#append").on("click", function(){
    var button = $.parseHTML("<button class='edit-doc'>Edit</button>");
    $('div#container').append(button);
    $(button).button().on("click", function(){
        alert("clicked");
    });
});

//使用class=edit doc和add event listner加载所有按钮
$（函数（）{
$（“button.edit doc”）.button（）。在（“单击”，函数（）上）{
警报（“点击”）；
});
});
//如果单击了id为Append的按钮，则添加按钮
$（“#追加”）。在（“单击”，函数（）上）{
var按钮=$.parseHTML（“编辑”）；
$（'div#container'）。追加（按钮）；
$（按钮）.button（）.on（“单击”，函数（））{
警报（“点击”）；
});
});

工作示例：

$（“编辑文档按钮”）。每个

-是否有多个具有相同id的元素？您不应该使用类。