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
Post a Comment