add content via ajax, but mouseenter event is ineffective

Question

There is a html table, and in each row, I add the "edit" icon, when mouse enter the icon, it will popup a menu. In document.ready function, the event mouseenter is effective. But if I add a new row via dajax, the event mouseenter is ineffective.

function add_finding(table_type){
if(!check_finding_attribute(table_type))
    return;
else{
Dajaxice.codeinsight.add_finding(Dajax.process,get_finding_attribute_dict(table_type));
    reset_finding_attribute(table_type);
    //reload the popup menu
    $(".menubox").each(function(){
        var menubox_id=$(this).attr("id");
        var showmenu_id=menubox_id.replace("menubox","showmenu");
        $.showmenu("#"+showmenu_id,"#"+menubox_id);
    });
}
}

$(document).ready(function(){
jQuery.showmenu = function(showbtnid,showboxid) {
    var showmenubtn = $(showbtnid);
    var showmenubox = $(showboxid);
    showmenubtn.mouseenter(function(e){
        var thish = $(this).height();
        var offset = $(this).offset();
        var tipx = offset.left;
        var tipy = offset.top+thish-1;
        showmenubox.show().css("left",tipx).css("top",tipy);
        t= setTimeout(function(){showmenubox.hide();},1000);
      });
    showmenubox.mouseenter(function(){
        clearTimeout(t);
    });
    showmenubox.mouseleave(function(){
        $(this).hide();
    });
};
$(".menubox").each(function(){
    var menubox_id=$(this).attr("id");
    var showmenu_id=menubox_id.replace("menubox","showmenu");
    $.showmenu("#"+showmenu_id,"#"+menubox_id);
});
});

Answer 1

If content is coming via AJAX and you want to bind event to that as well, you should you.

jQuery.on(...)

normal event binding will not work for those.

jQuery.on("mouseenter", showbtnid,function(){...})

The above binding will handle existing elements as well as newly added elements in future.

Happy Coding :)