Question

I have a table where the rows are dynamically removed and added via jQuery. There are supposed to be click event handlers on the td > ul elements and there is the possibility of a sub-table within a td element. My problem is that I can not figure out how to establish a listener on the parent table’s td > ul elements without triggering a click on the nested table’s td > ul elements. I have tried the following statements using 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

As always, any help is much appreciated!

Answer 1

you need to give it a starting point

Start from table.click-me > tbody > then get first tr only

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