jQuery的的onmouseover上第二個事件

Question

觸發我創建了下面的函數jQuery中

function menuItem(x,i) { 
var imgALT = $(x).text(); 
$(x).mouseover(function() 
{ 
    $(x).parent().parent().parent().children("img").attr("src", "menu/menu"+i+".jpg"); 
    $(x).parent().parent().parent().children("img").attr("alt", imgALT); 
    $(x).parent().children("span").css("color", "#FFFFFF"); 
    $(x).css("color", "#CA0109"); 
}); 
}; 

，我又把它使用觸發以下：

<span onmouseover="menuItem(this,'09-01')">月亮蝦餅 (2份)</span> 

它的工作原理正是我這打算，但只有在我第二次將鼠標懸停後，不是第一次。我認爲這可能是某種加載問題？我應該如何確保在第一次鼠標懸停時觸發，以及後續事件？

非常感謝！

Answer 1

問題是，只有在將鼠標懸停在元素上並且內聯onmouseover已被觸發後，才使用jQuery綁定事件。理想的情況是

function menuItem(x,i) { 
    var $x = $(x); 
    var imgALT = $x.text(); 

    $x.parent().parent().parent().children("img").attr("src", "menu/menu"+i+".jpg"); 
    $x.parent().parent().parent().children("img").attr("alt", imgALT); 
    $x.parent().children("span").css("color", "#FFFFFF"); 
    $x.css("color", "#CA0109"); 
} 

，我會用data-屬性：

，因爲它看起來像onmouseover事件是對應用程序的結構至關重要，你的JavaScript更改爲類似這樣

HTML：

<span data-image="09-01">月亮蝦餅 (2份)</span> 

Ja vaScript：

$(document).ready(function() { 
    $('span[data-image]').mouseover(function() { 
     var $this = $(this); 
     var $images = $this.parent().parent().parent().children("img"); 

     $images.attr("src", "menu/menu" + $this.data('image') + ".jpg"); 
     $images.attr("alt", $this.text()); 

     $this.siblings("span").css("color", "#FFFFFF"); 
     $this.css("color", "#CA0109"); 
    }); 
}); 

Answer 2

使用document.ready功能

$(document).ready(function(){ 
    $('span').mouseover(function(){}); 
    });