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