即使我刪除了類名，jquery元素仍然可以工作

我想要在類中單擊同一元素時刪除基於類的懸停效果。這是代碼：即使我刪除了類名，jquery元素仍然可以工作

<div class="myClass"> some text </div>

和Javascript：

$('.myClass').on('click', function(e) { 
    $(this).removeClass('myClass'); 
    alert('myClass is removed from the element but the hover effect still work. i dont want that i want the hover effect to work just if the element has .myClass '); 
})

，這是jsfiddle

來源

2016-01-19 ler

也許使用CSS'：hover'僞類？ –

懸停效果不是基於該類 - 只綁定事件處理程序。如果您希望它動態地反應元素是否具有該類，請改用事件委派。（有關詳細信息，請參閱文檔'.on'。） – CBroe

類僅用於將元件識別到bind一個event到，即mouseenter和mouseleave事件。這就是爲什麼除去這個班級什麼都不做這是你想要移除的事件。這將刪除這些事件：

$(this).unbind('mouseenter mouseleave');

來源

2016-01-19 17:45:13

作爲替代Andrew Cheong's excellent answer，您也可以使用可選的選擇爲.on()方法來指定觸發事件，像這樣的元素：

$(document.body).on('mouseenter', '.myClass', function() { 
 
    $(this).css('color','red'); 
 
}).on('mouseleave', '.myClass', function() { 
 
    $(this).css('color','black'); 
 
}); 
 

 
$('.myClass').on('click', function(e) { 
 
    $(this).removeClass('myClass'); 
 
    alert('myClass is removed from the element but the hover effect still work. i dont want that i want the hover effect to work just if the element has .myClass '); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="myClass"> some text </div>

儘管這種方法的操作更接近於您認爲.hover()方法正在執行的操作，但可能會產生不良副作用。

來源

2016-01-19 17:48:40

解除綁定是一個很酷的選擇，但你也可以使用jQuery的.off()功能，像這樣：

('.myClass').on('click', function(e) { 

    $('.myClass').off('mouseleave mouseleave'); 

});

它消除了事件處理程序有問題對於那些mouseenter和mouseleave事件。

更新Fiddle

來源

2016-01-19 18:00:44 jyrkim

即使我刪除了類名，jquery元素仍然可以工作

回答

相關問題