Jquery functions not working on ajax loaded data

arbutus

Hi all,

I have a large amount of data so want to load it via ajax, however the jquery functions do not work for the loaded data compared to the static data. For example if I have the table setup to load a json array from data.txt with
[code]
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": 'data.txt'
} );

$("img").click(function () {
alert("test");
})
[/code]

And have the data
[code]
{
"aaData": [
[
"",
"Test 1",
"Test 2",
"Test 3",
"Test 4"
],
[
"",
"Test 5",
"Test 6",
"Test 7",
"Test 8"
]
]
}
[/code]

Then the alert would work for a static image on the page, but not the ajax loaded image. How would I resolve this?

Thanks

UPEngineer

Since the table data was created after the page was loaded, you must use the jQuery "live" event using the .on() function.

For example:

[code]
$("img").on("click", function () {
alert("test");
})
[/code]

or

[code]
$(document).on("click", "img", function () {
alert("test");
})
[/code]