动态生成的链接上的 jQuery 事件

Question

我有一个由另一个函数动态创建的链接列表，它们的形式为 <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 经验，我可能会以错误的方式进行操作。

非常感谢任何帮助。

Answer 1

选择器在创建时应用。您选择元素，然后绑定(bind)到这些元素，而不是绑定(bind)到选择器。

但是，您可以利用事件冒泡——祖先元素会收到子元素上的事件通知。 jQuery 为此提供了一个漂亮的语法 delegate :

$('#containerElement').delegate('#hi-1', 'click mouseover mouseleave', highlight);

这假设#containerElement 是所有将匹配的元素的祖先元素。

<小时/>

但是，如果您只有一个元素(如建议的为其提供一个 ID)，那么在创建元素时绑定(bind)处理程序可能会更容易。