jQuery鼠标悬停事件处理程序不工作或正在检测

我有一个文本输入框的窗体，当输入值被输入到输入框中时，它显示与其当前值相似的条目。显示结果，但由于某些原因，分配给它们的事件处理程序运行不正常：当我将鼠标悬停在它们上方时，输入框的值未设置为其值。jQuery鼠标悬停事件处理程序不工作或正在检测

谷歌浏览器的开发工具根本没有检测到事件处理程序被连接。 但是，当我尝试静态版本的.searchResult类并在其中放入一些文本时，事件处理程序确实正常工作。

问题似乎只发生在从数据库中提取的结果中。

这是Javascript代码。

$(document).ready(function() { 
    function search(searchQuery) { 
     $.post("requires/search.php", {searchBit: searchQuery}, function(data) { 
      $("#results").html(data); 
     }); 
    } 
    $("#searchBar").focus(function() { 
     if ($("#searchBar").val() === "search...") { 
      $("#searchBar").val(""); 
     } 
     $(this).addClass("searchBarFocus"); 
     $(this).removeClass("searchBarBlur"); 
    }); 
    $("#searchBar").blur(function() { 
     $(this).addClass("searchBarBlur"); 
     $(this).removeClass("searchBarFocus"); 
    }); 
    $("#searchBar").keypress(function() { 
     $("#results").fadeOut(100); 
     $("#results").fadeIn(100); 
    }); 
    $("#searchBar").keyup(function() { 
     search($(this).val()); 
    }); 
    $(".searchResult").mouseover(function() { 
     $("#searchBar").val($(this).text()); 
    }); 
});

这是将结果输出到#results div内部的地方。

<div id="search"> 
    <form> 
     <input type="text" name="searchBit" value="search..." id="searchBar" class="searchBarBlur" 
     autocomplete="off"/> 
    </form> 
    <div id="results"> 
    </div> 
</div>

这是searchResult类的css，如果它有任何用处的话。

.searchResult { 
    cursor: pointer; 
    color: #444444; 
    border-top: .1em solid #EEEEEE; 
    height: 100%; 
    padding: .4%; 
} 

.searchResult:hover { 
    background-color: #77CC77; 
}

有没有人有任何想法可能会导致这个问题？我必须在脚本的另一个位置附加事件处理程序吗？

来源

2011-02-13 Kevin Gurney

在这里，我重新分解（优化）代码：

$(function() { 

    var sb = $('#searchBar'), 
     sbFocus = 'searchBarFocus', 
     sbBlur = 'searchBarBlur', 
     res = $('#results'); 

    sb.focus(function() { 
     this.value == 'search...' && this.value = '';  
     $(this).removeClass(sbBlur).addClass(sbFocus); 
    }).blur(function() { 
     $(this).removeClass(sbFocus).addClass(sbBlur); 
    }).keypress(function() { 
     res.fadeOut(100).fadeIn(100); 
    }).keyup(function() { 
     $.post('requires/search.php', { 
      searchBit: this.value 
     }, function(data) { 
      res.html(data); 
     }); 
    }); 

    res.delegate('.searchResult', 'mousenter' ,function() { 
     sb.val($(this).text()); 
    }); 

});

来源

2011-02-13 15:38:09

感谢您为我的代码优化版本！ – 2011-02-13 15:48:49

@Kevin我建议你使用delegate（）而不是live（）。它具有更好的性能......请参阅上面的我的代码。 – 2011-02-13 15:50:33

使用.live()绑定您的活动：

$("#searchBar").live('focus', function() { 
     if ($("#searchBar").val() === "search...") { 
      $("#searchBar").val(""); 
     } 
     $(this).addClass("searchBarFocus"); 
     $(this).removeClass("searchBarBlur"); 
    }); 
    $("#searchBar").live('blur', function() { 
     $(this).addClass("searchBarBlur"); 
     $(this).removeClass("searchBarFocus"); 
    }); 
    $("#searchBar").live('keypress', function() { 
     $("#results").fadeOut(100); 
     $("#results").fadeIn(100); 
    }); 
    $("#searchBar").live('keyup', function() { 
     search($(this).val()); 
    }); 
    $(".searchResult").live('mouseover', function() { 
     $("#searchBar").val($(this).text()); 
    });

你现在结合您的活动方式，它只能识别元素它们已经在页面上呈现，因此您正在加载的动态元素没有附加事件。使用live()会将事件附加到现有元素以及任何动态添加的元素。

来源

2011-02-13 15:38:23 Victor

jQuery鼠标悬停事件处理程序不工作或正在检测

回答

相关问题