Javascript 创建的jQuery按钮未侦听单击_Javascript_Jquery

Javascript 创建的jQuery按钮未侦听单击

javascript jquery

Javascript 创建的jQuery按钮未侦听单击,javascript,jquery,Javascript,Jquery,我有一个小循环，其中为阵列中的每个产品创建了一个新的buy按钮在循环中，将创建一个buy按钮，并应单击该按钮。但是，未注册单击。但按钮确实出现在我的页面中 var list = jQuery('<ul/>'); for (var i in perSecondProducts) { var product = perSecondProducts[i]; var listItem = jQuery('<li/>'); listItem.html(i

我有一个小循环，其中为阵列中的每个产品创建了一个新的buy按钮

在循环中，将创建一个buy按钮，并应单击该按钮。但是，未注册单击。但按钮确实出现在我的页面中

var list = jQuery('<ul/>');
for (var i in perSecondProducts) {
    var product = perSecondProducts[i];

    var listItem = jQuery('<li/>');
    listItem.html(i + '(' + product['price'] + ')');


    var buyButton = jQuery('<button />');

    buyButton.html('Buy');

    buyButton.data('price', product['price']);
    buyButton.data('scorePerSecondUpgrade', product['scorePerSecondUpgrade']);

    listItem.append(buyButton);
    buyButton.click(function () {
        console.log('123123');
    });

    list.append(listItem);
}

$('.productsPerSecondList').html(list.html());

var list=jQuery（“”）；
用于（产品中的var i）{
var乘积=产品[i]；
var listItem=jQuery（“”）；
html(i+'（'+product['price']+'）；
var buyButton=jQuery（“”）；
html（'Buy'）；
数据（'price'，产品['price']）；
数据（'scorePerSecondUpgrade'，产品['scorePerSecondUpgrade']）；
追加（buyButton）；
Buy按钮。单击（函数（）{
console.log（'123123'）；
});
list.append（listItem）；
}
$（'.productsPerSecondList'）.html（list.html（））；

更改：

$('.productsPerSecondList').html(list.html());

致：

当您使用

.html（）

时，您没有添加刚刚创建的

和按钮。您正在添加与它们具有相同源代码的新HTML，即所有内容的副本。因此，您无法获得任何事件绑定

您还可以通过使用事件委派来解决这个问题，如Rajaprabhu Aravindasamy的回答所示。然后绑定不是到特定的元素，而是到与选择器匹配的所有元素。这是实现这一点的常用惯用方法。

以下代码通过将所有未来的类元素“butt”订阅到单击事件来工作。我还演示了如何获取单击按钮的li元素以及如何操作它。您可以在事件处理程序中使用$（this）来获取单击的特定按钮

$(document).on('click', '.butt', function () {
    $(this).parent().append('1231');
    console.log('123123');
});

我使用了Rajaprabhu Aravindasamy的答案，但添加了更多代码来澄清它。整个代码：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Home</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"
            type="text/javascript"></script>
</head>
<body>
    <div class="productsPerSecondList">
    </div>
    <script>
        var list = jQuery('<ul/>');
        var perSecondProducts = [
            {
                price: "5",
                scorePerSecondUpgrade:"3"
            },
            {
                price: "1",
                scorePerSecondUpgrade:"2"
            }
        ];
        for (var i in perSecondProducts) {
            var product = perSecondProducts[i];

            var listItem = jQuery('<li/>');
            listItem.html(i + '(' + product['price'] + ')');


            var buyButton = jQuery('<button />');
            buyButton.addClass('butt');
            buyButton.html('Buy');

            buyButton.data('price', product['price']);
            buyButton.data('scorePerSecondUpgrade', product['scorePerSecondUpgrade']);

            listItem.append(buyButton);


            list.append(listItem);
        }

        $('.productsPerSecondList').html(list.html());
        $(document).on('click', '.butt', function () {
            $(this).parent().append('1231');
            console.log('123123');
        });
    </script>
</body>
</html>


家
var list=jQuery（“”）；
var产品=[
{
价格：“5”，
第二次升级：“3”
},
{
价格：“1”，
第二次升级：“2”
}
];
用于（产品中的var i）{
var乘积=产品[i]；
var listItem=jQuery（“”）；
html(i+'（'+product['price']+'）；
var buyButton=jQuery（“”）；
buyButton.addClass（'butt'）；
html（'Buy'）；
数据（'price'，产品['price']）；
数据（'scorePerSecondUpgrade'，产品['scorePerSecondUpgrade']）；
追加（buyButton）；
list.append（listItem）；
}
$（'.productsPerSecondList'）.html（list.html（））；
$（文档）.on（'click'，'.butt'，函数（）{
$（this.parent（）.append（'1231'）；
console.log（'123123'）；
});

你的问题是什么？@JK。他所做的是实现这一点的另一种方式，因为他在创建新元素之后绑定它。

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Home</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"
            type="text/javascript"></script>
</head>
<body>
    <div class="productsPerSecondList">
    </div>
    <script>
        var list = jQuery('<ul/>');
        var perSecondProducts = [
            {
                price: "5",
                scorePerSecondUpgrade:"3"
            },
            {
                price: "1",
                scorePerSecondUpgrade:"2"
            }
        ];
        for (var i in perSecondProducts) {
            var product = perSecondProducts[i];

            var listItem = jQuery('<li/>');
            listItem.html(i + '(' + product['price'] + ')');


            var buyButton = jQuery('<button />');
            buyButton.addClass('butt');
            buyButton.html('Buy');

            buyButton.data('price', product['price']);
            buyButton.data('scorePerSecondUpgrade', product['scorePerSecondUpgrade']);

            listItem.append(buyButton);


            list.append(listItem);
        }

        $('.productsPerSecondList').html(list.html());
        $(document).on('click', '.butt', function () {
            $(this).parent().append('1231');
            console.log('123123');
        });
    </script>
</body>
</html>