Question

I am prepending a list item <li> to my <ul> in my jQuery code and in the prepended <li> I have a text link that calls fancybox.

Any clicked item with the class ‘fb’ attached to it will call and open fancybox only the newly appended list item with text link will not open fancy box.

So here is what I have in the prepend

<a class='fb' href='viewtopic?id="+nextlistid+"'>"+title+"</a>

I tried removing the (class=’fb’) from the link and instead gave it a unique id which i later tried adding $("theuniqueid").addClass("fb"); but that didnt seem to do it either.

Here’s the fancybox code (which works)

$(".fb").fancybox({
    'padding': 0,
    'autoScale': false,
    'transitionIn': 'none',
    'transitionOut': 'none',
    'overlayColor': '#f7f7f7',
    'overlayOpacity': 0.5
});

Any ideas on how to get the class to attach to the newly prepended item?

Thanks in advance

Answer 1

You have to rebind the fancy box function again once you add some element dynamically ( prepend here). Something like this.

$("#thatDiv").prepend("<a class='fb' href='viewtopic?id="+nextlistid+"'>"+title+"</a>");
$(".fb").fancybox({
    'padding': 0,
    'autoScale': false,
    'transitionIn': 'none',
    'transitionOut': 'none',
    'overlayColor': '#f7f7f7',
    'overlayOpacity': 0.5
});

I would probably move the binding code a generic function so that i can call it from many places.