JQuery Click Events not firing based on class attribute - GETTING DESPERATE - PLEASE HELP!
JQuery Click Events not firing based on class attribute - GETTING DESPERATE - PLEASE HELP!
alexandregsaf
Posts: 3Questions: 0Answers: 0
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.
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
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.
This discussion has been closed.
Replies
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.
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
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!
Change to:
[code]
$( "#dataTable" ).on( "click", 'tbody tr', function() {
[/code]
to be a delegated event.
Allan