将事件处理程序添加到运行时创建的 DOM 树中的特定子项

Question

我正在尝试将事件处理程序绑定到一个元素，该元素是 DOM 树中的子元素，该元素在运行时添加到 HTML 动态中。以下 HTML 显示了我得到的内容。表格及其thead 和tbody 是静态HTML。稍后我将 tbody (<tr><td><img src="bla.png"></td></tr>) 的内容添加到它。

<table id="progData">
    <thead>
        <th>Image</th>
    </thead>
    <tbody>
        <tr><td><img src="bla.png"></td></tr>
    </tbody>
</table>

所以现在我想在图像上绑定一个事件处理程序，例如：

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

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

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

至少在点击行时让它工作。

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

Answer 1

啊，对不起。我在事件处理程序中的回调函数中有一个错误。因为在访问某些仅存在于“tr”中的属性之前，我必须使用“tr”。因此，当我将处理程序更改为“img”对象时，我只是忘记现在通过 parent() 函数访问属性...：/

所以这只是我的错误。问题解决了:)

Answer 2

你可以试试做——

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

如果在代码被命中之前已经加载了 HTML。

或

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

HTML -

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

Javascript -

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

Answer 3

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

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>");

JSFiddle -> http://jsfiddle.net/krasimir/ybavx/

Answer 4

如果我理解正确，这应该是你所追求的：

$(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*/});

由于元素是动态添加的，因此您需要附加到文档中，因为该元素尚未创建或在文档创建之后创建。更多信息可以在这里找到：http://api.jquery.com/on/