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鼠標懸停事件處理程序不工作或正在檢測

回答

相關問題