Question

I have a form with a text input box which displays similar entries to its current value below it when a value is input into the input box. The results are displayed, but for some reason the event handler assigned to them is not functioning properly: when I hover over them the value of the input box does not get set to their value.

Google Chrome’s Developer Tools do not detect the event handler as being attached at all.
However, when I tried a static version of the .searchResult class and put some text in it, the event handler did function correctly.

The problem seems to occur only with results that are pulled from the database.

Here is the Javascript code.

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

This is where the results are being output inside of the #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>

This is the css for the searchResult class if it is of any use at all.

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

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

Does anyone have any idea what might be causing this problem? Do I have to attach the event handler at a different point in my script?

Answer 1

Here, I re-factored (optimized) your code:

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

});