-1

我正在尝试将事件处理程序绑定到一个元素，该元素是 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 中比直接子元素更深的动态元素？

4

4 回答 4

1

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

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

于 2013-08-27T13:02:07.103 回答
0

你可以尝试做 - 

$("#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*/});
于 2013-08-27T12:51:19.087 回答
0

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

$(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/

于 2013-08-27T12:57:25.610 回答
0

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

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/

于 2013-08-27T13:02:09.120 回答