CODEWITHSUNDEEP
javascriptjqueryhtmlevents
Jonny Sooter
Jonny Sooter

Reputation: 2417

Click event listener on a <tr>

I have this event that listens for a click on a img then it switches the img for another, but this img can get real small and I wanted to make the entire tr click able. Any suggestions?

$('#example tbody td img').live('click', function () {
                var nTr = $(this).parents('tr')[0];
                if ( oTable.fnIsOpen(nTr) )
                {
                    /* This row is already open - close it */
                    this.src = "images/details_open.png";
                    oTable.fnClose( nTr );
                }
                else
                {
                    /* Open this row */
                    this.src = "images/details_close.png";
                    oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
                }
            } );

Update I tried using this but now my img won't change. How would I select the img to use (this) or do I just make a var for it?

$('#example tbody td').on('click', function (e) {
        var myImage = $(this).find("img");
        var nTr = $(this).parents('tr')[0];
        if ( oTable.fnIsOpen(nTr) )
        {
        /* This row is already open - close it */
        myImage.src = "images/details_open.png";
        oTable.fnClose( nTr );
        }
        else
        {
        /* Open this row */
        myImage.src = "images/details_close.png";
        oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
        }
    } );

Upvotes: 1

Views: 3786

Answers (5)

Mohammed Swillam
Mohammed Swillam

Reputation: 9242

first: it's now better to use delegate() or on() instead of live(), which is now deprecated by the way.

second: just add a handler for the td, and by nature, it will get the same click event that will occur on your img, then you can eaisly select the img and play with it like nomral, consider the following example which is using the better way of on()

Update: I've modified the code a little bit to make it better

    $('#example tbody').on('click', 'td', function (e) {
        var myImage = $(this).find("img");
        var nTr = this.closest('tr');
                if ( oTable.fnIsOpen(nTr) )
                {
                    /* This row is already open - close it */
                    myImage.src = "images/details_open.png";
                    oTable.fnClose( nTr );
                }
                else
                {
                    /* Open this row */
                    myImage.src = "images/details_close.png";
                    oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
                }
}

you should now be ok with this solution, let me know if you need further help.

Upvotes: 0

Guumaster
Guumaster

Reputation: 389

Delegate the click event to TD tag, then find image inside the clicked target and change its source. Here:

$('#example tbody').on('click', 'td', function (e) {
              var nTr = $(this).parents('tr')[0];
              var clickedImg = $(e.target).find('img')[0]; 

            if ( oTable.fnIsOpen(nTr) )
            {
                /* This row is already open - close it */
                clickedImg.src = "images/details_open.png";
                oTable.fnClose( nTr );
            }
            else
            {
                /* Open this row */
                clickedImg.src = "images/details_close.png";
                oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
            }
        } );

I did not tried this, but it should work.

Upvotes: 0

nax
nax

Reputation: 1224

As @Mohammed ElSayed says .live() is deprecated..

But.. in my case, when i create on the fly elements 

 .on('click', function(){})

doesn't work for me...

So try using .live() in the td

$('#example tbody td').live('click', function()...);

The same happends to me with (doesn't work)

$('#example').prop('name');

Just commenting maybe i'm doing something bad with that.

Upvotes: 0

Starx
Starx

Reputation: 79021

Pretty Simple

Select td instead of img

 $('#example tbody td').on('click', function () {

P.S: Of course the live function has been deprecated so its better to use .on()

Upvotes: 2

joe
joe

Reputation: 817

Select the td and bind the click event to it.

Upvotes: 0

Related Questions