Question

我附加了带有一些ID的按钮，我使用这些ID来制作点击内容当它附加时没有采取button（）效果并且单击它不会采用我为此按钮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 id="container"></div>

Answer 1

这似乎是你所追求的：

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

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

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

http://jsfiddle.net/PF8xY/

有关此行为的详情，请参阅jQuery how to bind onclick event to dynamically added HTML element。

Answer 2

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

使用selector .on的文档将允许您将事件绑定到动态创建的元素。这是我在执行之前不存在DOM元素时发现的唯一方法。

我在一个动态创建的表中执行此操作，该表可以排序并且运行良好。

编辑：

这是一个例子。点击按钮添加div，然后点击div即可获取内容。

http://jsfiddle.net/FEzcC/1/

Answer 3

第一个代码块将事件列表器附加到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");
    });
});

工作示例：

http://jsfiddle.net/RC9Vg/

Jquery附加了样式和功能

3 个答案: