Attaching event handler to elements created by rows added/removed by fnOpen() and fnClose()

4giedrius

Hi Allan,

First of all I want to thank you for such wonderful plugin as it become important part of most of my projects.

I am struggling a little with one issue. I have dataTable with data and some pictures, to be displayed in hidden row. Everything is fine: I create a simple table and hide pictures column using "bVisible" : false, but I would like to attach event handler which would show these images fur user using fancybox plugin. The problem is that since these elements are added to DOM after document has loaded it does not trigger fancybox plugin.

I tried to do it after fnOpen function but it doesn't seem to work. However Visual Event (another awesome tool :) ) show that event handler is attached to pictures and triggers it.

Here is my code:

Image cell:[code]






[/code]

Fancybox trigger:
[code] else
{
/* Open this row */
this.src = "/views/css/bootstrap/img/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
$(".fancybox").fancybox({
showCloseButton : true,
showNavArrows : true,
openEffect : 'none',
closeEffect : 'none'

});

}[/code]


If I set "bVisible": true and attach fancybox handler using $(document).ready() function: [code]
$(document).ready(function() {
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none'
});

});[/code]

it works fine when pressing on image in visible column of the table, but I need it to be visible only in hidden row and triggered from there. I will appreciate any help about this issue.

Regards,
Giedrius

allan

Hi Giedrius,

Interesting - I would have thought that your use of $().fancybox just after fnOpen would do what is needed. Can you give us a link to your page please?

Allan