jQuery mouseover event handler not working or being detected

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="searchBa开发者_JAVA技巧rBlur" 
        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?

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

});

use .live() to bind your events:

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

The way you are binding your event now, it only recognizes elements that are already rendered on the page, therefore the dynamic elements you are loading do not have an event attached. Using live() will attach the event to existing element as well as to any elements that are dynamically added.