Question

所选的＆＃34; tr＆＃34;标记是由click事件动态添加的，但是这不能通过另一个click事件返回任何内容。所有原始的静态＆＃34; tr＆＃34;动态添加＆＃34; tr＆＃34;之上的标签可以通过相同的点击事件正常返回。

// eventhandler to get current this<tr> object
$('tr').click(function () {
                    console.log(this)
}
//original static <tr>, works fine
<tr>
                    <td>Meet friends for dinner</td>
                    <td><time datetime="2013-10-14">2013-10-14</time></td>
                    <td>Personal</td>
                    <td>
                        <nav>
                            <a href="#">Edit</a>
                            <a href="#">Complete</a>
                            <a href="#">Delete</a>
                        </nav>
                    </td>
</tr>
//how I add <tr> dynamically
<script id="taskRow" type="text/x-jQuery-tmpl">
<tr>
    <td>${task}</td>
    <td><time datetime="${requiredBy}">${requiredBy}</time></td>
    <td>${category}</td>
    <td>
        <nav>
            <a href='#'>Edit</a>
            <a href='#'>Complete</a>
            <a href='#' class='deleteRow'>Delete</a>

        </nav>
     </td>
</tr>
</script>

Answer 1

事件处理程序仅绑定到当前选定的元素;在您的代码调用.click（）

时，它们必须存在于页面上

因此，在您生成代码之前，您的以下代码tr必须存在。

$('tr').click(function () {
  console.log(this);
}

如果将新HTML注入页面，最好使用委托事件来附加事件处理程序，如下所述。

委托事件的优势在于，他们可以处理稍后添加到文档中的后代元素中的事件。

$("table").on("click", "tr", function(event){
    console.log(this);
});

有关详情，请参阅此fiddle。

注意：委托事件方法（第二个代码示例）将事件处理程序仅附加到一个元素table，并且事件只需要冒泡一个级别（点击tr至table）。

为什么在动态添加标签时没有返回对象？

1 个答案: