Question

我有冒泡问题（我认为）

我有一个输入

在悬停时，我将带有click事件的div附加到输入的父级，第二个悬停功能是删除所说的附加div。

问题是，当覆盖在我附加的div之上时，当鼠标悬停在覆盖上时，会调用鼠标输出功能，然后触发鼠标等等。

var clear = $('<div class="keyword-clear-icon">').css({
                left            : $('#searchtext').width() - 20,
            }).attr('title','Clear');

$("#dashboard-searchbox #searchtext").hover(
    function(){
        $(clear).click(function(){
            $("input#searchtext").val('');
        });
        $('#dashboard-searchbox').append(clear);
    },
    function(){
       $('#dashboard-searchbox').find('.keyword-clear-icon').remove();
    }
);

是否有实现这种效果的标准方法？

Answer 1

您可以使用search类型的输入框，而不是使用javascript：

<input id="searchtext" name="SearchText" 
       type="search" placeholder="Anywhere or anything…" />

演示：http://jsfiddle.net/maniator/N7FFB/1/

Answer 2

只需将悬停应用于#dashboard-searchbox容器。

http://jsfiddle.net/N7FFB/2/

的Javascript

$("#dashboard-searchbox").hover(
    function(){
        $(clear).click(function(){
            $("input#searchtext").val('');
        });
        $('#dashboard-searchbox').append(clear);
    },
    function(){
       $('#dashboard-searchbox').find('.keyword-clear-icon').remove();
    }
);

jquery悬停气泡导致循环闪烁效果

2 个答案:

的Javascript