Binding Click event after append Jquery not working

Question

I've got a modal box that pops up popups when the plus icon is clicked in a table. After the page is loaded five rows are displayed in the table and clicking the plus sign opens the modal box. (Works perfectly).

But now we are changing the content of the table by an AJAX call. Once the TR's are replaced by new ones, the plus signs aren't working any more.

I'm aware of the fact that the event-handler

Table:

<table class="table table-hover" id="carsTable">
    <thead>
    <tr>
        <th>Car Title</th>
        <th>Actions</th>
    </tr>
    </thead>
    <tbody>
        <tr id="car-1836">
            <td>ferrari f50</td>
            <td><a href="#" class="black-modal-80" id="5269327"><i class="glyph-icon icon-plus-circle">+</i></a></td>
        </tr>
    </tbody>
    <tfoot>
    <tr>
        <th>Product Title</th>
        <th>Actions</th>
    </tr>
    </tfoot>
</table>

The Jquery Part that handles the AJAX (and works, replaced the table according to the JSON respons).

$.post("../../../scripts/getCars.php", {s: carSearch}, function (data) {
    $("tr[id='carLoader']").remove();

    $.each(data, function (index) {
        if ($('#selectedCar-' + data[index].externalProductId + '').length == 0) {
            $('#carsTable')
                    .append('<tr id="car-'+ data[index].id+'"><td>' + data[index].title + '</td><td><a href="#" class="black-modal-80" id="' + data[index].externalProductId + '"><i class="glyph-icon icon-plus-circle"></i></a></td></tr>');
        }
    });

}, "json");

Now the event Handler, works after document is ready, but stops working once the AJAX call has replaced the data.

$('#carsTable').on('click', '.black-modal-80', function () {
    console.log('Click detected; modal will be displayed');
});

What's wrong with the binding?

I think your binding is correct and you can bind to #carsTable because it's in the DOM as soon as the DOM is ready. Please have a look at this jsfiddle. I don't see your issue. — AWolf
– AWolf, Commented Mar 28, 2015 at 23:44

Max Sandelin · Accepted Answer · 2015-03-29 00:42:52Z

9

When you append something to the window, the element doesn't exist until you run the jQuery. That means the element the click event points to doesn't exist when the click event is defined. So you can use the body as a selector like this.

$('body').on('click', '.black-modal-80', function () {
    console.log('Click detected; modal will be displayed');
});

Hope this helped!

edited Mar 29, 2015 at 0:42

answered Mar 28, 2015 at 23:22

Max Sandelin

1406 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Binding Click event after append Jquery not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related