JQuery on( ) is breaking events

willtx

We're using dataTables v 1.9.3 (I tried 1.9.4 with same results). I changed all the live( ) calls to on( ) since live is deprecated in JQuery 1.7. Is this a bug (using jQuery .on( ) ) or do I need to intialize the datatable differently. I was working on a jsFiddle but the page has > 2K lines of js. Trying to just post the necessary code. Thanks!


http://debug.datatables.net/edojew

allan

Can you show us what your live call looked like? DataTables 1.9.4 should be fully compatible with jQuery 1.9 (it doesn't use 'live' internally). Some of the plug-ins did, but the nightly versions on the download page have resolved those issues.

Allan

willtx

Thanks for the response, sorry for the delay. Here's an example of the call. I changed the calls back to live for now - I have other issues :-)

[code]
$('#tabVendorTable tbody tr').live('click', function (event) {
var quantity = $("#txtQuantity").val();
if (quantity == "0") {
return false;
};
if (quantity == "") {
alert("Enter a quantity before filling out the Vendor Asset #");
return false;
}
if (save == false && edit == false) {
var oTable = $('#tabVendorTable').dataTable();
var nRow = $(this);

$('#tabVendorTable tr').css('background-color', '');

oTable.fnSetColumnVis(1, true);
oTable.fnSetColumnVis(2, true);
$(".vendorTable th").css("font-size", "xx-small");
if (edit == false) {
editRow(oTable, nRow[0]);
nEditing = nRow[0];
};
};
save = false;
});
[/code]

allan

> $('#tabVendorTable tbody tr').live('click', function

will translate with `on` to:

[code]
$('#tabVendorTable tbody').on('click', 'tr', function
[/code]

Allan

willtx

Hey Allan. Yes, I changed the live() to on() and die() to off() and the click function ceased to work on the table. I'll try again.

tpc

I'm having the same issue. I'm attempting to add a Delete button to each row of a table whose data is set dynamically. The .on() just isn't working. Any ideas how to fix this?

Here's the table set up with the first column showing the delete button.

[code]
rTable = $('#review-table').dataTable({
'iDisplayLength': reviewPageSize,
'sPaginationType': 'full_numbers',
'sDom': 'r<"clear">tp',
'fnDrawCallback': function () {
$('#review-table_paginate').toggle(!($('#num-selected').text() <= reviewPageSize));
},
'aoColumns': [
{
'sName': 'del',
'mData': null,
'bSortable': false,
'sClass': 'center',
'fnRender': function (obj) { return ''; }
},
{ ' sType': 'html', 'bSortable': false },
{ 'sType': 'html', 'bSortable': false },
{ 'sType': 'html', 'bSortable': false },
{ 'sType': 'html', 'bSortable': false },
{ 'sType': 'html', 'bSortable': false, 'bVisible': false }
]
});
[/code]

Here is the .on click code that is not being recognized but that worked with .live and a previous version of jquery.


[code]

$('.delete-row').on('click', 'a', function (e) {
e.preventDefault();
console.log('delete');
});

[/code]


Here's the code that actually loads data into the table. I'm populating the table based on the subset of data from a different table.

[code]

$('#review-selections').click(function () {
var rows = oTable._('tr.row-selected:not(.unselectable)');
var selected = [];
for (var i in rows) {
var row = [];
row.push('');
for (var x = 0; x < 5; x++) {
row.push(rows[i][x]);
}
selected.push(row);
}

$('#num-selected').text(selected.length);
rTable.fnClearTable();
rTable.fnAddData(selected);
});

[/code]

allan

Link to a test case showing the issue please: http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read .

My guess is that `.delete-row` is in the tbody, but without a test case, I'm just guessing. You should use the tbody has the main selector.

Allan

tpc

Hi Allan, unfortunately this is an internal Java application that I can't publish to a public site.

The .delete-row is actually listed in the code above. Its set on the fnRender on line 14 of the dataTable init.

[code]'fnRender': function (obj) { return ''; }[/code]

In the meantime I will attempt to use the tbody as the main selector to see if that improves anything.

By the way, this is not the first time I've posted a question here and you have always been very responsive. Just want to say thank you and I appreciate your support!

allan

In that case, yes, its the selector that is the problem. Use an element that is always on the page, otherwise it won't be selected!

Allan

tpc

Thanks, that helped me to figured it out.

Changed this

[code]
$('.delete-row').on('click', 'a', function (e) {
[/code]

To this

[code]
$('#review_table').on('click', '.delete-row', function (e) {
[/code]