JQuery Datatable having trouble with binding multiple events with multiple buttons in single row

Question

Very new to JQuery, I have a data table integrated in my application. I have added two buttons in the last column, but facing issues with binding it with particular event.

Here is my code to generate last column of the table.

   "mRender": function (data, type, full) {
    console.log('>>>>>>>>>>><<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<');
    console.log(full);
    if(full.status) {
        return '<button href="#"' + 'id="'+ data + '">Edit</button> <input type="button" href="#"' + 'id="disable-'+ data + '" value="Disable"></input>';                       
    }
    else {
        return '<button href="#"' + 'id="'+ data + '">Edit</button> <input type="button" href="#"' + 'id="enable-'+ data + '" value="Enable"></input>';
    }
}

based on status I am showing button either enable/disable.

Now I want to bind onclick event using JQuery.

I have bind one button using following way.

$('#tenantTable tbody').on( 'click', 'button', function () {        
    var data = table.row( $(this).parents('tr') ).data();
});
$('#tenantTable tbody').on( 'click', 'input[id="enable*"]', function () {
    var data = table.row( $(this).parents('tr') ).data();
    console.log('>> DISABLE <<');
});
$('#tenantTable tbody').on( 'click', 'input[id="disable*"]', function () {
    var data = table.row( $(this).parents('tr') ).data();
    console.log('>> DISABLE <<');
});

It is not working, Is there a way I can do the above?

Answer 1

The on() method in this way is a good choice to delegate event handlers. The selector parameter you use however should be changed slightly:

$('#tenantTable tbody').on( 'click', 'input[id*="enable"]', function () {
    // logic
});

$('#tenantTable tbody').on( 'click', 'input[id*="disable"]', function () {
    // logic
});

The *= selector translates in a contains selector. An alternative for your solution could be a startswith selector ^=

This logic makes it possible to have dynamic id's for example:

<input type="button" id="enable-5" data-action="enable" data-id="5" value="my button" />

The selector could be something like:

$(element).on('click', '[id^="enable-"]', function(){/*this: element where the id starts with enable-*/});
$(element).on('click', '[data-action="enable"]', function(){/*this: element where the data-action equals to enable*/});
$(element).on('click', '[data-id]', function(){/*this: element where data-id is defined*/});