类在 jQuery prepend 上不起作用

Question

我在我的jQuery代码和预置的<li>中预置了一个列表项，<li>我的<ul>，我有一个称为fancybox的文本链接。

任何附加了类"fb"的点击项目都会调用并打开花哨框，只有带有文本链接的新附加列表项不会打开花哨框。

所以这是我在前置中的内容

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

我尝试

从链接中删除 （class='fb'），而是给了它一个唯一的 id，后来我尝试添加$("theuniqueid").addClass("fb");但似乎也没有这样做。

这是花哨的盒子代码（有效）

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

关于如何让类附加到新预置项的任何想法？

提前致谢

Answer 1

一旦你动态添加了一些元素，你必须再次重新绑定花哨的盒子函数（prepend这里）。像这样的东西。

$("#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
});

我可能会将绑定代码移动为泛型函数，以便我可以从许多位置调用它。

Answer 2

我认为您应该在最近添加的链接上再次调用您的花哨框方法。例如：

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

实际上，您动态添加了最近的项目，而以前的 $（".fb"） 选择器不包含新创建的列表项。