如何向 jquery 中動態創建的元素添加操作？

Question

我有一個按鈕，當您單擊此按鈕時，它會動態創建第二個按鈕。 我需要在動態創建的按鈕（第二個按鈕）上放置一個點擊事件，但我的點擊 function 不起作用。

如何讓我的 click function 使用動態創建的元素？

Answer 1

我知道很久以前有人問過這個問題...
由於 jQuery v1.7 正確的方法是：

$(document).on( "click",'.myNewlyCreatedElement', function () {
    // Your action
});

參考： http://api.jquery.com/on/

Answer 2

您需要在創建后將點擊事件綁定到第二個按鈕。 或使用 jQuery Live 或 Delegate 功能。

http://api.jquery.com/delegate/

根據一組特定的根元素，將處理程序附加到與選擇器匹配的所有元素的一個或多個事件，現在或將來。

如果您需要更多幫助，請發布一些代碼。

Answer 3

你必須使用 jQuery .live() function 可以在這里找到。

例子：

$('button').live('click', function(){
    ...
});

Answer 4

這是一個例子。

標記：

<button id="create">Create</button>

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

腳本：

var count = 0;
$("#create").click(function(e) {
    var num = count += 1;
    var newButton = $("<button>New " + num + "</button>").click(function() {
        alert("Button " + num + " was clicked.");
    });
    $("#container").append(newButton);
});

Answer 5

查看 jQuery.live()

jQeru.live()

Answer 6

您需要使用 jquery live 方法附加一個事件。 它將事件綁定到當前和未來元素的所有實例。

$('.classname').live('click', function() {
  alert("triggered");
});

這樣，單擊事件將添加到類名為 classname 的所有元素中 - 即使您插入更多具有相同 class 的元素。

Answer 7

<input id="but1" type="button" value="click"></input>
<script>
$(document).ready(function(){
    $('#but1').click(function(){
    var button = $(document.createElement('input'));
        button.attr('id', 'but2');
        button.val('but2');
        button.attr('type', 'button');
        button.click(function(){alert('hello');});

        $(document.body).append(button);

    });

});
</script>