1

我有一个表格，其中的行是通过 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

与往常一样，非常感谢任何帮助！

4

2 回答 2

1

你需要给它一个起点

从 table.click-me > tbody > 开始，然后只获取第一个 tr

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

于 2012-08-01T18:08:57.757 回答
0

见演示

$("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>")
});    ​

或者也许你想要这个

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

​
于 2012-08-01T18:10:26.043 回答