动态生成链接上的jQuery事件

Question

我有一个链接列表,这些链接是由表单中的其他函数动态创建的<a id="hi-1">test</a> <a id="hi-2">test</a>.

我正在尝试定位这些链接并将click/mouseover事件绑定到它们.以下是针对其中一个链接(#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

选择器在创建时适用.您选择元素,然后绑定到这些元素,而不是选择器.

但是,您可以使用事件冒泡 - 祖先元素会通知子元素上的事件.jQuery为此提供了一个漂亮的语法delegate:

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

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

但是,如果您只有一个元素(通过给它一个ID来建议),那么在创建元素时简单地绑定处理程序可能会更容易.