Created jQuery button not listening to click

Question

I've got a little loop in which a new buy button is created for every product in the array.

In the loop a buy button is created and should be clicked. However, the click isn't being registered. The button does appear in my page though.

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

@JK. What he's doing is another way to accomplish that, since he's binding the new element after creating it. — Barmar, May 31 '14 at 07:44

score 1 · Answer 1 · answered May 31 '14 at 07:48

Change:

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

to:

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

When you use .html(), you're not adding the <ul> and buttons that you just created. You're adding new HTML with the same source code as them, i.e. a copy of everything. As a result, you don't get any of the event bindings.

You can also solve this by using event delegation, as shown in Rajaprabhu Aravindasamy's answer. Then the binding isn't to specific elements, but to all elements that match the selector. This is the usual, idiomatic way to accomplish this.

score 0 · Answer 2 · answered May 31 '14 at 08:28

The following code works by subscribing all the future class elements "butt" to a click event. I also showed how to get the li element where the button is clicked and how to manipulate it. You use $(this) in the event handler to get the specific button that is clicked.

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

I used the answer of Rajaprabhu Aravindasamy but added more code to clarify it. The whole code:

<!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>

Created jQuery button not listening to click

2 Answers2