如何将事件绑定到动态创建的JQuery DOM元素

Question

我无法在我试图制作的插件中引用一个对象。

该插件与div容器相关联。

当dom准备就绪时，它会在启动默认值中加载 - 创建自己的div，其中包含它知道的id和无序列表。 我可以添加列表项，并使用$this.append(..)正常工作。 但是我想添加一个功能，点击单个列表项会执行某些操作..现在警报就足够了。

通常我会做：

$("#myId").click(function(){...

我如何将这样的功能添加到插件？

我想要插件本身设置的动作，所以点击插件创建的列表项已经附加到我写入jquery插件的一些功能。

Answer 1

根据您的评论，您可以将新选项卡存储在变量中：

var newTab = $("<li id='tab#" + o.tabCount + "' myTabPane='" + 
    o.tabId + o.tabCount + "' class='tab'><h3>Tab " + o.tabCount
    + "</h3></li>");
$('#' + o.tabListId).append(newTab);
newTab.click(function() {
    var paneId = '#' + $(this).attr('myTabPane');
    $(paneId).siblings().hide();
    $(paneId).show();
});

链接到jsfiddle的工作示例 。

顺便说一下，你原来的脚本第二个'在错误的地方：

$("<li id='tab#'" + o.tabCount + " class='tab'><h3>Tab "
              ^^^

Answer 2

在按标签名称追加ID而不是ID后，您可能希望引用它们。

$(this).find("li").click(function(){  /* do work */});

如果你绝对必须通过ID引用它，你可以这样做：

$(this).find("li").each(function(){
   var id = $(this).attr("id");
   /* do work */
});