.click function will only work inside a parent .click function and cannot be executed outside it

Question

I've been developing an application which allows table rows to be edited using jquery. The original post is here Targetting a <td> from it's parents <tr> with data-attributes using jquery

The flow of the application is:

Table is loaded.
'Edit' button (with a class editBtn) appears on each row.
Clicking the 'Edit' button removes the class editBtn and adds a class saveBtn. The text is also changed from 'Edit' to 'Save'.

The intention is that when clicking the Save button I can do an ajax request.

However, I can only target the .saveBtn being clicked if the jquery for it resides inside the original .click function on .editBtn. So for example, this works:

$('.editBtn').click(function() {
    var $button = $(this).addClass('save').text('Save');
    var $tr = $button.closest('tr');
    var id = $tr.data('id');
    var $td = $tr.find('td:first');
    var $td2 = $tr.find('td:nth-child(2)');

    $td.html('<input value="' + $td.text() + '" />');
    $td2.html('<button class="btn btn-primary btn-success saveBtn">Save</button>');

    $('.saveBtn').click(function() {
        console.log('savebtn');
    });
});

But this does not work:

$('.editBtn').click(function() {
    var $button = $(this).addClass('save').text('Save');
    var $tr = $button.closest('tr');
    var id = $tr.data('id');
    var $td = $tr.find('td:first');
    var $td2 = $tr.find('td:nth-child(2)');

    $td.html('<input value="' + $td.text() + '" />');
    $td2.html('<button class="btn btn-primary btn-success saveBtn">Save</button>');

});

// Moved outside $('.editBtn').click
    $('.saveBtn').click(function() {
        console.log('savebtn');
    });

Why is this?

Update your code to use the on("click@, function()...) format as this works for dynamic elements where .click() does not. This is the gist of the duplicate to which @SatPal has sent you. — Vanquished Wombat, Nov 09 '16 at 11:14
@Satpal I disagree with this being marked as a duplicate. Whilst I can see there are parallels with that post and mine, there's no way I would have been able to find it based off a search anyway. The answer given below is helpful to this situation. — Andy, Nov 09 '16 at 11:15
@Andy, This is duplicate as you are creating _dynamically_ , Solution is provided in the linked question. — Satpal, Nov 09 '16 at 11:18

score 2 · Accepted Answer · answered Nov 09 '16 at 11:10

It is not working because you are appending .savebtn after click event is bind. you have to use document on click. this will work:-

$('.editBtn').click(function() {
    var $button = $(this).addClass('save').text('Save');
    var $tr = $button.closest('tr');
    var id = $tr.data('id');
    var $td = $tr.find('td:first');
    var $td2 = $tr.find('td:nth-child(2)');

    $td.html('<input value="' + $td.text() + '" />');
    $td2.html('<button class="btn btn-primary btn-success saveBtn">Save</button>');

});

// Moved outside $('.editBtn').click
    $(document).on('click', '.saveBtn', function(){ 
        console.log('savebtn');
    });

.click function will only work inside a parent .click function and cannot be executed outside it

1 Answers1