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");
});
});

但不幸的是，它无法正常工作。请帮我找到问题。

Demo

提前致谢。

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");
});

Updated fiddle here.

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/

查看此工作演示

click（）表示动态创建的按钮

7 个答案: