Question

I am a beginner with jQuery, and am stuck with this problem:

I have this table:

<table>
    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="3"><p>Blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td></tr>

    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="3"><p>Blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td></tr>

    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="3" class="xtra"><p>Blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td></tr>    
</table>

And I want to hide/unhide the particular rows with:

$(document).ready(function() {
    $("td[colspan=3]").find("p").hide();
    $("table").click(function(event) {
        event.stopPropagation();
        var $target = $(event.target);
        if ( $target.closest("td").attr("colspan") > 1 ) {
            $target.slideUp();
        } else {
            $target.closest("tr").next().find("p").slideToggle();
        }                    
    });
});

Using this approach directly works, but I am loading this table HTML using AJAX, and thus the selectors don’t work. How should I modify my selectors?

I’m loading this HTML with this:

$.get('/tab.html',function(data){
        $('#tabContentBox').html(data);
                 ...
                 ...
}

Answer 1

Delegating the event is what you need to do

$('#tabContentBox').on("click","table",function(event) {
    event.stopPropagation();
    var $target = $(event.target);
    if ( $target.closest("td").attr("colspan") > 1 ) {
        $target.slideUp();
    } else {
        $target.closest("tr").next().find("p").slideToggle();
    }                    
});