Question

我有一个带有文本输入框的表单，当输入框中输入一个值时，它会在其下方显示与其当前值类似的条目。显示结果，但由于某种原因，分配给它们的事件处理程序无法正常运行：当我将鼠标悬停在它们上面时，输入框的值不会设置为它们的值。

Google Chrome的开发人员工具根本不会将事件处理程序检测为已连接。 但是，当我尝试静态版本的.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;
}

有谁知道可能导致此问题的原因是什么？我是否必须在我的脚本中的不同位置附加事件处理程序？

Answer 1

在这里，我重新考虑（优化）你的代码：

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

});

Answer 2

使用.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()会将事件附加到现有元素以及动态添加的任何元素。

jQuery mouseover事件处理程序无法正常工作或被检测到

2 个答案: