ajax - JQuery Select element dynamically created -


i working on project composed table.

this table contains tr , td. , generated jquery, more precisely, ajax, dynamically generated.

what want do, put mouseover event on td when put mouse on td, add class it, , when mouseout, remove class.

but since dynamically generated item, can't mouseover event normally.

the td have same class.

here line creates td

$('#index-table > tbody').append("<td class='index-table-cell'><a href='"+ pathchampion + "' class='index-table-namelink'><div class='index-table-namecontainer'>" + this['name'] + "</div><img src='" + pathimage + "' alt='" + this['pkchampion'] + "' class='index-table-image'></a></td>"); 

i have simple code work 50% of want do. class adding td, probleme adds td, , want new class on mouseovered td.

$("#index-table").on({     mouseenter: function () {         $(this).find('.index-table-image').addclass("index-table-imagehover");         $(this).find('.index-table-image').prev().addclass("index-table-namecontainerhover")         console.log($(this));     },     mouseleave: function () {         $(this).find('.index-table-image').removeclass("index-table-imagehover");         $(this).find('.i ndex-table-image').prev().removeclass("index-table-namecontainerhover")     } }); 

thanks helps :)!!!

add delegation:

$("#index-table").on({     mouseenter: function () {         $(this).find('.index-table-image')                .addclass("index-table-imagehover")                .prev()                .addclass("index-table-namecontainerhover")     },     mouseleave: function () {         $(this).find('.index-table-image').removeclass("index-table-imagehover");         $(this).find('.i ndex-table-image').prev().removeclass("index-table-namecontainerhover")     } }, 'td.index-table-cell'); 

or better, add event handler when create proper dom elements:

var td  = $('<td />', {'class':'index-table-cell',                         on: {                            mouseenter: function() {                                $(this).find('.index-table-image')                                    .addclass("index-table-imagehover")                                    .prev()                                    .addclass("index-table-namecontainerhover");                            },                            mouseleave: function() {                                $(this).find('.index-table-image').removeclass("index-table-imagehover");                                $(this).find('.i ndex-table-image').prev().removeclass("index-table-namecontainerhover");                            }                        }                       }),       = $('<a />',  {'class':'index-table-namelink',  href: pathchampion}),     div = $('<div />', {'class':'index-table-namecontainer', text: this['name']}),     img = $('<img />', {'class':'index-table-image', src:pathimage, alt:this['pkchampion']});  $('#index-table > tbody').append( td.append( a.append(div, img) ) ); 

Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

c++ - End of file on pipe magic during open -