0

我附加了一些 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>
4

3 回答 3

0

这似乎是你所追求的：

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 如何将 onclick 事件绑定到动态添加的 HTML 元素。

于 2013-07-10T19:35:07.623 回答
0 
$(document).on("click", "#selector", function(){
    //Your code here.
});

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

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

编辑：

这是一个例子。单击按钮添加一个div然后单击div以获取其内容。

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

于 2013-07-10T19:39:15.350 回答
0

第一个代码块将事件侦听器附加到所有带有 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/

于 2013-07-10T19:56:24.947 回答