Buttons in cell won't work with ajax source

shahji

... but they do work with javascript source.

Here's a simple test case.

http://live.datatables.net/fupinifi/2/edit

If I move the input data to a file and use ajax to load it, the button clicks stop working. I have the few lines to load the ajax source commented out in the script. The content of example.json is just the same array that I have assigned to 'data' at the top of the script.

Appreciate some help!!

shahji

Any hints/direction to explore on how I could fix this issue?

kthorngren

Not sure what the problem is but I did take your example and apply it to an ajax source:
http://live.datatables.net/mihumope/1/edit

You can toggle back and forth between using your data from the script to an ajax source. Someone more knowledgable than I can take a look.

Kevin

shahji

Yeah I am not a web developer and my knowledge is very limited. I am scraping thru' forums and online tutorials to get by. I was using this for a simple personal project and ran into this issue which I can't seem to figure it out and none of the posts have helped. Makes me think I am doing something that its not meant to be.

My wild guess is the jQuery listeners need to change somehow to work. There is a second parameter to 'on' function in some examples on this website where 'td' and 'tr' are passed in. I tried similar things but none worked.

shahji

Bumping it up one last time to see if experts can chime in on this.

shahji

Answering my own question.

When adding buttons dynamically, one cannot listen for events on those buttons with jQuery the usual way. Instead of the following

$('div.value_toolbar button.edit_value').on('click', function() {
    var row = $(this).closest('tr');
    var cell = $(this).closest('td');
    console.log("Edit button was clicked: " + row.index() + ', ' + cell.index());
});

do it this way and it works -

$(document).on('click', 'div.value_toolbar button.edit_value', function() {
    var row = $(this).closest('tr');
    var cell = $(this).closest('td');
    console.log("Edit button was clicked: " + row.index() + ', ' + cell.index());
});

Some online discussions about why the former solution doesn't work and latter works -

stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements#9331127

stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements