class not working on jQuery prepend

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

Can you show the code to add the new element? Do you call `fancybox` before or after adding this new item? — lonesomeday, May 29 '12 at 11:43
Have a look at this http://stackoverflow.com/questions/9081571/how-to-bind-fancybox-to-dynamic-added-element — Prasenjit Kumar Nag, May 29 '12 at 11:44
I do not call fancy box when the new item is added i.e it is not a trigger to open fancybox I just wanted the class attached to the newly created link for when the user clicks on it which in turn will open fancybox, thanks for the reply btw — Woz, May 29 '12 at 12:02

score 2 · Accepted Answer · answered May 29 '12 at 11:44

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.

score 0 · Answer 2 · answered May 29 '12 at 11:46

0

I think you should call again your fancybox method on your recently added link. For instance:

var li = $("<li></li>").addClass("fb");
$(ul).prepend(li);
li.fancybox({/*...*/});

Indeed, you added your recently item dynamically, and the previous $(".fb") selector did not include your newly created list item.

answered May 29 '12 at 11:46

Jonathan Petitcolas

4,254
4
31
42

Thanks for the response Johnathan, the problem seemed to be a binding issue, thanks for reply – Woz May 29 '12 at 12:09

class not working on jQuery prepend

2 Answers2