javascript - Click event listener on a <tr> -


i have event listens click on img switches img another, img can real small , wanted make entire tr click able. suggestions?

$('#example tbody td img').live('click', function () {                 var ntr = $(this).parents('tr')[0];                 if ( otable.fnisopen(ntr) )                 {                     /* row open - close */                     this.src = "images/details_open.png";                     otable.fnclose( ntr );                 }                 else                 {                     /* open row */                     this.src = "images/details_close.png";                     otable.fnopen( ntr, fnformatdetails(otable, ntr), 'details' );                 }             } ); 

update tried using img won't change. how select img use (this) or make var it?

$('#example tbody td').on('click', function (e) {         var myimage = $(this).find("img");         var ntr = $(this).parents('tr')[0];         if ( otable.fnisopen(ntr) )         {         /* row open - close */         myimage.src = "images/details_open.png";         otable.fnclose( ntr );         }         else         {         /* open row */         myimage.src = "images/details_close.png";         otable.fnopen( ntr, fnformatdetails(otable, ntr), 'details' );         }     } ); 

first: it's better use delegate() or on() instead of live(), deprecated way.

second: add handler td, , nature, same click event occur on img, can eaisly select img , play nomral, consider following example using better way of on()

update: i've modified code little bit make better

    $('#example tbody').on('click', 'td', function (e) {         var myimage = $(this).find("img");         var ntr = this.closest('tr');                 if ( otable.fnisopen(ntr) )                 {                     /* row open - close */                     myimage.src = "images/details_open.png";                     otable.fnclose( ntr );                 }                 else                 {                     /* open row */                     myimage.src = "images/details_close.png";                     otable.fnopen( ntr, fnformatdetails(otable, ntr), 'details' );                 } } 

you should ok solution, let me know if need further help.


Comments

Popular posts from this blog

jasper reports - Fixed header in Excel using JasperReports -

media player - Android: mediaplayer went away with unhandled events -

python - ('The SQL contains 0 parameter markers, but 50 parameters were supplied', 'HY000') or TypeError: 'tuple' object is not callable -