Question

我有一个表，其中动态删除行并通过jQuery添加。 td > ul元素上应该有单击事件处理程序，并且td元素中可能存在子表。我的问题是，我无法弄清楚如何在父表的td > ul元素上建立一个监听器，而不会触发嵌套表的td > ul元素上的单击。我使用jQuery.on()尝试了以下语句。

HTML

<table class="click-me">
    <tbody>
        <tr>
            <td>
                <ul><li>click</li></ul>
            </td>
            <td>dummy td
            </td>
        </tr>
    </tbody>
</table>

CSS

td { border: 1px solid; margin: 20px; padding: 20px; }

.new { background-color: yellow; }

的Javascript

$("table.click-me > tbody").on("click", "tr:first-child > td > ul > li", function()
{
    $(this).closest("tr").after("<tr class=\"new\"><td><ul><li>click (new)</li></ul></td><td><table><tbody><tr><td><ul><li>click</li></ul></td><td>dummy td</td></tr></tbody></table></td></tr>")
});

$("table.click-me").on("click", "tbody > tr > td > ul > li", function()
{
    $(this).closest("tr").after("<tr class=\"new\"><td><ul><li>click (new)</li></ul></td><td><table class=\"\"><tbody><tr><td><ul><li>click</li></ul></td><td>dummy td</td></tr></tbody></table></td></tr>")
}); //works on ALL children elements, even the sub-table. Not the desired results

一如既往，非常感谢任何帮助！

Answer 1

你需要给它一个起点

从table.click-me＆gt;开始tbody＆gt;然后只获得第一个

$("table.click-me").on("click", "tbody:first > tr > td > ul > li", function(){
     $(this).closest("tr").after("<tr class=\"new\"><td><ul><li>click (new)</li></ul></td><td><table><tbody><tr><td><ul><li>click</li></ul></td><td>dummy td</td></tr></tbody></table></td></tr>")
});

http://jsfiddle.net/wgRb5/1/

Answer 2

请参阅DEMO

$("table.click-me > tbody > tr:first-child > td > ul > li").on("click", function() {
  $(this).closest("tr").after("<tr class=\"new\"><td><ul><li>click (new)</li></ul></td><td><table><tbody><tr><td><ul><li>click</li></ul></td><td>dummy td</td></tr></tbody></table></td></tr>")
});

或许你想要This One

$("table.click-me > tbody > tr > td > ul > li").live("click", function() {
  $(this).closest("tr").after("<tr class=\"new\"><td><ul><li>click (new)</li></ul></td><td><table><tbody><tr><td><ul><li>click</li></ul></td><td>dummy td</td></tr></tbody></table></td></tr>")
});

jQuery单击TD元素上的Event而不触发嵌套表TD元素

2 个答案: