jQuery mouseon/mouseout or hover within an "on" binding event

Question

I have the following jquery code which doesn't work quite right when trying to implement the binding the with the on event.`

    $(".editable_template_region").on({"mouseover":function(){
        $('<a href="javascript:void(0)" class="hoverItTemplate">click to edit</a>').appendTo($(this));

    }, "mouseout" : function() {
        $(this).find(".hoverItTemplate").remove();
    }});`

I don't think this code is right becuase this causes the events to "flash" or cycle back and forth repeatedly. So my hover class just flashes on and off.

This is the code I had prior which worked but I want to switch this to the on event for better binding.

      $(".editable_template_region").hover(function() {
        $('<a href="javascript:void(0)" class="hoverItTemplate">click to edit</a>').appendTo($(this));
    }, function() {
        $(this).find(".hoverItTemplate").remove();
    });     

Thanks in advance.

Answer 1

Try this:

$(".editable_template_region").on({
    mouseenter: function() {
        $('<a href="javascript:void(0)" class="hoverItTemplate">click to edit</a>').appendTo($(this));
    },
    mouseleave: function() {
        $(this).find(".hoverItTemplate").remove();
    }
});​

I'm not sure what you mean by "better binding", but the above, or your plan .hover() should both work.