Question

我有一个小循环，为阵列中的每个产品创建一个新的购买按钮。

在循环中，会创建一个购买按钮，并且应该单击该按钮。但是，点击没有被注册。该按钮确实出现在我的页面中。

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());

Answer 1

变化：

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

为：

$('prodictsPerSecondList').empty().append(list);

当您使用.html()时，您不会添加刚刚创建的<ul>和按钮。您正在添加具有相同源代码的新HTML，即所有内容的副本。因此，您不会获得任何事件绑定。

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

Answer 2

以下代码通过将所有未来的类元素“butt”订阅到click事件来工作。我还展示了如何获取单击按钮的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>

创建jQuery按钮不听单击

2 个答案: