jQuery button doesn't work after sorting datatable

Question

I have a jQuery function which looks like this:

function unlock_reservation_columns(resid) {

    $('.unlock-columns').click( function(event) {

        event.preventDefault();
        $(this).closest('tr').find('.columns-locked').removeClass('columns-locked');
        $(this).html('<i class="fa fa-lock"></i> Lock Columns');
        $(this).attr('class', 'lock-columns');

        new PNotify({
            title: 'We have unlocked this reservation..',
            text: 'Reservation Unlocked',
            type: 'success'
        });
        var url = $(this).attr("href");
        var url_id = url.replace(/[^0-9]/g, '')
        $.get(url, function (data) {

            var confirm_changes = confirm('Do you wish to edit unlocked information?');

            if (confirm_changes) {
                window.location.href = '/reservations/database/edit/' + url_id;
            }
            else {
                location.reload()
                return false;
            }
        });
    });
});

<a class="unlock-columns" href="<?php echo $row->unlock_url; ?>"><i class="fa fa-unlock"></i> Unlock Columns</a>

The button "unlock-columns" is located inside a Datatable custom column. Now when the page is only initialized this button works fine. After i sort something in the table. the (data-order-by) and click the button it doesn't work.. like after sorting it stops working. any ideas why?

davidkonrad · Accepted Answer · 2015-10-02 08:10:32Z

5

Use a delegated event handler

$('#tableId').on('click', '.unlock-columns', function(event) {

instead. As it is now you only attach the click handler to visible rows upon initialisation, not rows injected later on (as when you are paginating, sorting etc).

answered Oct 2, 2015 at 8:10

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

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

2 Comments

Ilanus Over a year ago

Awesome! seems to be working now.. could you explain when the delegated event handler needs to be used? and what why it works now

D4V1D Over a year ago

@IlanHasanov: See this answer.

Collectives™ on Stack Overflow

jQuery button doesn't work after sorting datatable

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related