Javascript 向运行时创建的DOM树中的特定子级添加事件处理程序

我试图将事件处理程序绑定到一个元素，该元素是DOM树中的子元素，该DOM树在运行时添加到HTML dynamic while中。下面的HTML显示了我得到的内容。表及其thead和tbody是静态HTML。稍后，我将向其添加tbody（

）的内容

但由于某些原因，这不起作用。我必须使用

$("#progData").on("click", "tr", function(e){/*do sth in here*/});

使其至少在单击行时工作

有没有办法将事件绑定到DOM中比直接子元素更深的动态元素？

您可以尝试执行以下操作-

$("#progData").find("img").on("click", function(e){/*do sth in here*/});

如果在命中代码之前已加载HTML

或

您可以尝试向动态内容添加一个类，然后绑定它的单击事件，例如

HTML-

<tr><td><img class="jMyImage" src="bla.png"></td></tr>

---

如果我理解正确，这应该符合您的要求：

$(document).on("click", "#progData img", function(e){/*do sth in here*/});

或者，如果您只想要第一个：

$(document).on("click", "#progData img:nth-child(2)", function(e){/*do sth in here*/});

---

因为元素是动态添加的，所以您需要附加到文档，因为元素尚未创建或是在文档创建之后创建的。更多信息可以在这里找到：

啊，对不起。我在事件处理程序中的回调函数中出错。因为在访问一些仅存在于“tr”中的属性之前，我必须使用“tr”。因此，当我将处理程序更改为“img”对象时，我忘记了通过parent（）函数访问属性…：/

---

所以这只是我的错误。问题已解决：）

我猜您正在尝试将事件附加到一个仍然不存在的标记上。我的意思是，您应该检查插入表行之后添加事件侦听器的时刻。例如，这对我有效：

var onImageLoaded = function() {
    $("#progData").on("click", "img", function(e){
        if(e.currentTarget.tagName == 'IMG') {
            console.log("clicked");
        }
    })
}

var table = $("#progData");
table.find("tbody").html("<tr><td><img src=\"http://krasimirtsonev.com/blog/articles/CSSThePowerOfInherit/icon-bullet.jpg\" onload=\"javascript:onImageLoaded();\"></td></tr>");

var onimageload=function（）{
$（“#progData”）。在（“单击”、“img”上，函数（e）{
如果（e.currentTarget.tagName=='IMG'）{
控制台日志（“单击”）；
}
})
}
var表=$（“#progData”）；
table.find（“tbody”）.html（“”）；

---

JSFiddle->

应用第一种方法时会出现什么错误？在修复损坏的HTML后，我觉得很好：为什么HTML会损坏？对我来说似乎是正确的。OP希望使用事件冒泡来附加单击。你的方法要求图像在那里。它仍然会有同样的问题。如果我们知道代码何时被击中，就不会。每当我实现一些需要动态加载内容的代码时，我都会在代码中引发一个事件，通知观察者，观察者又会绑定到动态添加内容上的事件。在这种情况下可以工作。TH OP使用事件冒泡，因此他们不必每次添加事件。可悲的是OP响应了，这是代码中的另一个错误……如果第二个错误有效，则id不在那里就没有问题。@epascarello问题在于图像不在那里，为了更清楚，它现在寻找第二个错误。更具体地说，您可以将其设置为“progData tbody img”

$(document).on("click", "#progData img", function(e){/*do sth in here*/});

$(document).on("click", "#progData img:nth-child(2)", function(e){/*do sth in here*/});

var onImageLoaded = function() {
    $("#progData").on("click", "img", function(e){
        if(e.currentTarget.tagName == 'IMG') {
            console.log("clicked");
        }
    })
}

var table = $("#progData");
table.find("tbody").html("<tr><td><img src=\"http://krasimirtsonev.com/blog/articles/CSSThePowerOfInherit/icon-bullet.jpg\" onload=\"javascript:onImageLoaded();\"></td></tr>");