JQuery Click Events not firing based on class attribute - GETTING DESPERATE - PLEASE HELP!

alexandregsaf

I'm currently using datatables processing on the server side and being loaded by Ajax Requests, the problem is, before changing all to server side, i had everything loaded in the DOM in my first request and then processed client side, that was fine because all my items were in the DOM, now with server side, looks like datatables uses aria properties to show components nested in it, so my events that were fired when you clicked an icon that has an specific class is not working anymore. Code below for example:

HTML

[code]

[/code]

valorVisita is the class there i'm using to fire the click event.

JQUERY

[code]
$('.valorVisita').click(function (e) {
valor = $(this).attr('idcliente');
$("#modalVisitaSubmit").attr('idcliente', valor);

e.preventDefault();
$.ajax({
url: '/Cliente/ContatoClienteJSON/',
cache: false,
type: 'POST',
data: { ClienteID: valor },
error: function (e) {
},
success: function (data) {
$("#compose-visita-contato option").each(function (i, elemento) {
$("#compose-visita-contato option[value='" + $(this).val() + "']").remove();
})

var response = $.parseJSON(data);
for (index in response) {
$('#compose-visita-contato').append('' + response[index].Nome + '');
}
}
});
});
[/code]

Used to work fine, now it's not even entering the event, my table is currently displaying like these:

[code]





Nome


Email


Site


Tipo


Potencial


Telefone

Ações







[/code]

But if I go to firebug, i can find my tbody elements like that:

[code]

A A B B ASSOCIAÇÃO ATLETICA DO BANCO DO BRASIL


Outros

(81) 3117-6056










[/code]

Anyone knows how to proceed? I can not use JQuery ON resource and a static components because i need the ID in idcliente and that's being rendered dinamically, so i need a way to make those available in my DOM.

Thanks in advance.

allan

See the top FAQ: http://datatables.net/faqs#events and the jQuery documentation for on: http://api.jquery.com/on/ - specifically about delegated events.

Allan

alexandregsaf

Allan,

I admit that i'm probably lost because considering my code, you can see that inside my tbody there's nothing, but when you use firebug, it shows hidden nodes that jquery functions cannot find.

So using something like:

[code]
$( "#dataTable tbody tr" ).on( "click", function() {

alert( $( this ).text() );

});
[/code]
Doesn't work for me because tr, td and other internal elements cannot be found. My modal needs to get the item ID, so when i submit it, i use it for deletion, update and other actions, but in order to pass it to my modal, i'm binding the click event using a class selector, like this:

[code]
$('.valorVisita').click(function (e) {
valor = $(this).attr('idcliente');
$("#modalVisitaSubmit").attr('idcliente', valor);
[/code]

and that's the part that doesn't work.

netaisllc

Your post is a little confusing. When you say "my table is currently displaying like these", what does that mean exactly? Are you using View Source in the browser? Let's assume that is true. With dynamic server-side loading that is exactly what is expected, because View Source shows the original page content at load time. Then (later, after the server loads the dynamic content), Firebug sees that content in the DOM. These are not hidden nodes, they are DOM nodes added to the document dynamically.

The click event on the the ClassName is probably failing because the DOM node (the row) isn't there yet when the Jquery statement is executed. Remember Jquery is very quiet about failures like this.

Allan suggests using event delegation because with it you can register events before their target nodes exist. That sounds right for this. However, you may also be able to register your events if you take care to do so AFTER the table row nodes have been added to the document. Note that pagination may be a challenged for you under that scenario.

Regards, KJM

alexandregsaf

netaisllc,

What you said made complete sense, i'm felling completely stupid, I was somehow assuming that data was hidden and JQuery functions could not work for that reason.

I just got my functions inside fnDrawCallback and worked just fine. Even with pagination it's working fine.

Thanks a lot, you and Allan were very helpful!

allan

> $( "#dataTable tbody tr" ).on( "click", function() {

Change to:

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

to be a delegated event.

Allan