mouseenter - jQuery event not firing on after DOM element is overwritten -

mouseenter - jQuery event not firing on after DOM element is overwritten -

first dynamically writing table div using innerhtml , i'm trying jquery function run when user hovers table cell. jquery function fires on table exists in html, 1 time overwrite innerhtml new table, jquery doesn't run function on hover anymore.

<div id="replacethis"> <table id="mytable"> <tr><td class="mycell">help</td></tr> </table> </div>

then utilize .on('mousenter') run function

$('#mytable tr td.mycell').on('mouseenter',function(){alert('omg help'); }

this works fine until replace innerhtml of div new table, much bigger, created loop through data. jquery not fire function on mouseenter though id's , classes same.

use delegated events. when replace body, generates new html elements, not have event handler attached anymore.

jquery provides delegated handler feature selector parameter on on function.

for instance:

$('body').on('mouseenter', '#mytable tr td.mycell', function(){alert('omg help'); }

read direct , delegated events paragraph in docs: http://api.jquery.com/on/

jquery mouseenter