click（）用於動態創建的按鈕

Question

我試圖為這樣的動態創建的按鈕添加click（）事件

HTML

<div></div>
 <button>generate new element</button>

jQuery的

$("button").click(function() {
    $("div").append("<input type='button' class='mins' value='button' name='mins[]' />")
});

$.each($('[name^=mins]'), function (i, item) {
$(document).on('click', 'button', function(e) {
 alert("1234");
});
});

但很遺憾，它無法正常工作。請幫助我查找問題。

演示

提前致謝。

Answer 1

您的$.each循環在添加按鈕之前運行。 因此它什么也沒做。

更改

$.each($('[name^=mins]'), function (i, item) {
$(document).on('click', 'button', function(e) {
 alert("1234");
});
});

至

$(document).on('click', 'input[name^=mins]', function(e) {
  alert("1234");
});

Answer 2

嘗試這個

$("button").click(function() {
    $("div").append("<input type='button' class='mins' value='button' name='mins[]' />")
});


$(document).on('click', '.mins', function(e) {
 alert("1234");
});

DEMO

Answer 3

用此代碼更改您的代碼

$("button").click(function() {
    $("div").append("<input type='button' class='mins' value='button' name='mins[]' />")
});


$(document).on('click', '.mins', function(e) {
 alert("1234");
});

小提琴： http : //jsfiddle.net/bnq3P/7/

Answer 4

它應該是：

$(document).on('click', 'input:button[name^=mins]', function (e) {
    alert("1234");
});

在這里更新了小提琴。

Answer 5

另一種方法是在創建按鈕時為其賦予功能

$("button").click(function () {
    var $input = $("<input>", {
        type: 'button',
        class: 'mins',
        value: 'button',
        name: 'mins[]',
        click: function () {
            alert("1234");
        }
    });
    $("div").append($input)
});

DEMO

Answer 6

不要將輸入按鈕直接附加到div。 它將添加到頁面中所有現有的div中。 另外，您的每個循環都在存在任何輸入按鈕之前運行，因此on事件不會綁定到任何元素。

采用：

$(document).on('click', 'input.mins', function (e) {  
    alert("1234");  
});

Answer 7

您可以使用此代碼更改JavaScript代碼

$("button").click(function() {
    $("div").append("<input type='button' class='mins' value='button' name='mins[]' />");
$('.mins').off('click');
$('.mins').on('click', function(e) {
 alert("1234");
});
});

您可以在此處查看此工作演示http://jsfiddle.net/bnq3P/14/