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 に答える