jQuery Click Event on TD elements without triggering on the Nested Table TD elements

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!

JoeFletch · Accepted Answer · 2012-08-02 03:45:58Z

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/

edited Aug 2, 2012 at 3:45

JoeFletch

3,9991 gold badge30 silver badges39 bronze badges

answered Aug 1, 2012 at 18:08

wirey00

33.7k7 gold badges56 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JoeFletch Over a year ago

This statement works when I change the jQuery to $("table.click-me").on("click", "tbody:first > tr > td > ul > li ", function() { . . . }); jsFiddle

JoeFletch Over a year ago

I will accept this answer once my edits go through. Thanks for the support on this topic.

Danil Speransky · Accepted Answer · 2012-08-01 18:10:26Z

0

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

Or maybe you want 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>")
});

answered Aug 1, 2012 at 18:10

Danil Speransky

30.5k6 gold badges70 silver badges78 bronze badges

2 Comments

JoeFletch Over a year ago

@SD, the first one, DEMO, does not work as intended. The new row created with the sub-table does not have the click event enabled.

JoeFletch Over a year ago

@SD, as for the other example, .live is depreciated and I would like to use the .on jQuery functionality.

Collectives™ on Stack Overflow

jQuery Click Event on TD elements without triggering on the Nested Table TD elements

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related