When adding new HTML table row (row with bound jQuery functions), functions stop working

Spartak

In the beginning I'd like to apologize for the confusing title. Let me try to clear things out:

Each HTML table row looks something like this:

[code]Edit[/code]

Note the class in table cells. It's bound to onClick event:

[code]
$().ready(function () {
$('.edit').click(function (e) {
e.preventDefault();
// do something
});
});
[/code]

So, If I have the data in the table (i.e. static content), the whole thing works perfectly. But in my case I have a function, which asynchronously fills the table (function is again bound to a link onClick):

[code]
function load() {
var oTable = $('#attList').dataTable();
var test = "test2";

$(test).each(function (index) {
oTable.fnAddData([$(this).children('td:first').html()]);
});

oTable.fnDraw();
}
[/code]

The row is added properly, but now the 'edit click' function will not execute when I click the link.

What could be the issue? Any ideas are very welcome.

And BTW, let me compliment this great plugin. It's one of the best!

jcready

Try this:

[code]oTable.on('click', 'a.edit', function(e) {
e.preventDefault();
});[/code]

JQuery's .on() will attach the the event handler to all elements that match the selector and any elements that get added later. You can also chain multiple events:

[code]oTable.on('click', 'a.edit', function(e) {
e.preventDefault();
}).on('dblclick', 'tr', function(e) {
// select the row, get aData, etc…
});[/code]

Spartak

The function was modified like this:

[code]
$('#attList').on('click', 'a.edit', function (e) {
e.preventDefault();
// etc.
});
[/code]

And it works like a charm!

Thank you for the reply!