我有一个由另一个函数动态创建的链接列表,它们的形式为 <a id="hi-1">test</a> <a id="hi-2">test</a>
等等
我正在尝试定位这些链接并将单击/鼠标悬停事件绑定(bind)到它们。以下是定位这些链接之一的代码 (#hi-1):
$(function() {
$("#hi-1") .bind("mouseover", highlight);
$("#hi-1") .bind("mouseleave", highlight);
$("#hi-1") .bind("click", highlight);
});
function highlight(evt){
$("p#p-1").toggleClass("highlighted");
}
这应该切换 的类名。
我似乎无法让它工作,我相信这可能与链接是动态创建的事实有关。然而,我几乎没有 jQuery 经验,我可能会以错误的方式进行操作。
非常感谢任何帮助。
最佳答案
选择器在创建时应用。您选择元素,然后绑定(bind)到这些元素,而不是绑定(bind)到选择器。
但是,您可以利用事件冒泡——祖先元素会收到子元素上的事件通知。 jQuery 为此提供了一个漂亮的语法 delegate
:
$('#containerElement').delegate('#hi-1', 'click mouseover mouseleave', highlight);
这假设#containerElement
是所有将匹配的元素的祖先元素。
但是,如果您只有一个元素(如建议的为其提供一个 ID),那么在创建元素时绑定(bind)处理程序可能会更容易。
关于动态生成的链接上的 jQuery 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6160716/