jQuery鼠标移入/移出或在“on”绑定事件中使用悬停

Question

我有下面这段jQuery代码，当尝试使用on事件进行绑定时，它的表现并不正确。

    $(".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();
    }});`

我认为这段代码不正确，因为它会导致事件重复“闪烁”或来回循环。因此我的悬停类只是闪烁着。

这是之前我用过的代码，虽然它能工作，但我想把它换成on事件以获得更好的绑定效果。

      $(".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.

- Mike McCoy

Answer 1

试试这个：

$(".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();
    }
});​

我不确定你所说的“更好的绑定”是什么意思，但是上面的代码或者你的计划中的 .hover() 都可以起作用。

- j08691