jQuery的鼠標懸停和點擊不工作相同的元素

我有這樣的代碼，鼠標懸停工作正常，但點擊時無法正常工作jQuery的鼠標懸停和點擊不工作相同的元素

HTML代碼：

<span class="rating"> 
<span class="rating1 rate" data-rating="1" title="1"><i class="icon-star-empty" ></i>  </span> 
<span class="rating2 rate" data-rating="2" title="2"><i class="icon-star-empty" ></i></span> 
<span class="rating3 rate" data-rating="3" title="3"><i class="icon-star-empty" ></i></span> 
<span class="rating4 rate" data-rating="4" title="4"><i class="icon-star-empty" ></i></span> 
<span class="rating5 rate" data-rating="5" title="5"><i class="icon-star-empty" ></i></span>

JQUERY

$(document).on('mouseover', '.rate', function() { 
    var rating = parseInt($(this).attr('data-rating'), 10); 
    var rate = rating + 1; 

    for (var j = 1; j < rate; j++) 
     { 
     $('.rating' + j).html('<i class="icon-star" title="' + j + '" data-rating="' + j + '"></i>'); 
     } 

    for (var i = rate; i < 6; i++) 
     { 
     $('.rating' + i).html('<i class="icon-star-empty" title="' + i + '" data-rating="' + i + '"></i>'); 
     } 
    }); 


$(document).on('click', '.rate', function() { 
    var rate = parseInt($(this).attr('data-rating'), 10); 
    alert(rate); 
});

JSFIDDLE http://jsfiddle.net/code_snips/EnjCH/1/

來源

2013-10-11 Manish

@SRy你確定嗎？這兩個事件可以共存於相同的元素... – mlnyc

不知道什麼是不工作...我去了jsfiddle，它似乎都很好... – buzzsawddog

@buzzsawddog在Js小提琴嘗試點擊明星。警報不發射 – Manish

試試這樣：

$('.rate').on('mouseenter', function() { 
    var rating = parseInt($(this).attr('data-rating'), 10), 
     rate = rating + 1, $rates = $('.rate'); 
    $rates.find('.icon-star').removeClass('icon-star').addClass('icon-star-empty'); 
    $rates.filter(':lt(' + ($rates.index(this) + 1) + ')').find('i').removeClass('icon-star-empty').addClass('icon-star '); 

}); 


$('.rate').on('click', function() { 
    var rate = parseInt($(this).attr('data-rating'), 10); 
    alert(rate); 
});

Fiddle

你的問題可能是因爲鼠標放在你不斷變化的HTML和鼠標可能一次又一次被觸發，並且沒有點擊事件被觸發，因爲它已經結束的元素（i）被一次又一次地改變，所以你的事件丟失了（點擊/ mouseover實際上發生在i上，它被冒泡到跨度的處理程序）。所以相反，只需添加/刪除類就是你想要的。

來源

2013-10-11 20:42:18 PSL

其工作..謝謝很多PSL – Manish

這個工作對我來說...

$('.rate').on('mouseover', function() { 
    console.log('in mouseover'); 
}); 


$('.rate').on('click', function() { 
    alert('in click'); 
});

我建議讓事情變得簡單，首先確保你正確連線了事件處理程序。只有這樣我纔會添加邏輯，因爲這會使事情變得複雜。把它從上面的示例中拿出來，並確保它在你的應用程序中起作用。如果是這樣，你就可以開始添加邏輯它

來源

2013-10-11 20:14:37 mlnyc

如果我刪除for循環，兩個事件都可以正常工作。檢查小提琴單擊事件不起作用 – Manish

jQuery的鼠標懸停和點擊不工作相同的元素

回答

相關問題