Radio Button Form element click() or change() not working with all the rows

rrkwells

Hello allan and others,

I am having a weird issue and can't figure out why this is happening. I have a radio button in each row with the id for that row as the value of the radio button. Lets say table has 50 rows and 10 rows are displayed first. I have a change() event in jquery for this radio button. When I click on any of the radio buttons of the first 10 records, it fires the change() event. But if I go to next page or filter the values and click on the radio button of a row that wasnt previously displayed, then the event is not fired. I tried with click() event and the same behavior exists there too. This is the jquery event.

[code]
$(document).ready(function() {
$('#peopletable').dataTable();

$("input:radio[name=personselect]").click(function(){
alert("bingo");
});
});
[/code]


and each row of the table contains this column value,
[code][/code]

Please let me know what I am doing wrong here. TIA!

rrkwells

it works if I remove the click event from ready() and put it in its own javascript function. Then call this function directly with onclick event from the radio button.. so it looks like once document is readu, it considers the rows displayed on the page only and not the hidden rows( I mean next page rows).. is that correct? If so, then what should I do so that the click() event is called jquery way?

fbas

any data off page will never have received the .click() handler (they don't exist in the DOM at the time .click() was called). use .live() instead so that future elements that match your selector have the "click" handler applied to them.

[code]$(document).ready(function() {
$('#peopletable').dataTable();

$("input:radio[name=personselect]").live("click", function(){
alert("bingo");
});
});
[/code]

khaos

The 'listener gets blown away on the redraw.

You need to re-set it like so:
[code]
$('#peopletable').dataTable({
"fnDrawCallback": function() {
$("input:radio[name=personselect]").click(function(){
alert("bingo");
}); }
});
[/code]

khaos

[quote]fbas said: any data off page will never have received the .click() handler (they don't exist in the DOM at the time .click() was called). use .live() instead so that future elements that match your selector have the "click" handler applied to them.[/quote]

I tried this and it works as well. I think it is a cleaner solution than abusing the fnDrawCallback.