How do I properly use the jQuery off() method to remove the mouseenter and mouseleave events off an element
Question
I seem to be having some trouble removing some events from an element using the jQuery off() method. I want to remove the mouseenter and mouseleave events when I match a certain criteria.
Heres what I got.
jsfiddle: http://jsfiddle.net/GE7Wg/
On the above fiddle, Article 2 should NOT have a mouseenter/mouseleave event associated with it.
Thanks!
HTML
<!DOCTYPE html>
<html>
<head></head>
<body>
<input type="hidden" id="HiddenMediaID" value="450">
<article class="Article">
Article 1
<input type="hidden" class="LatestMediaID" value="200" />
</article>
<article class="Article">
Article 2
<input type="hidden" class="LatestMediaID" value="450" />
</article>
<article class="Article">
Article 3
<input type="hidden" class="LatestMediaID" value="700" />
</article>
</body>
</html>
jQuery
//Page loaded - jQuery Ready
$(document).ready(function () {
//User hovering over article. Change BG.
$(document).on('mouseenter', '.Article', function () {
$(this).css('background', '#F0F8FF');
}).on('mouseleave', '.Article', function () {
$(this).css('background', '#FFFFFF');
});
//Set active BG color if condition is met.
$('.LatestMediaID').each(function () {
var LatestMediaID = $(this).val();
//Disable mouseenter and mouseleave events on the matched Article.
if (LatestMediaID == $('#HiddenMediaID').val()) {
//Disable events.
$(document).off('mouseenter', $(this).parent());
$(document).off('mouseleave', $(this).parent());
//Change BG color to light blue.
$(this).parent().css('background', '#F0F8FF');
}
});
});
CSS
.Article {
width: 150px;
height: 35px;
line-height: 35px;
margin: 10px;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
text-align: center;
}
3 answers
solution1
1 ACCPTED 2012-12-17 20:47:09
Lets do some DOM manipulations and throw some conditions
//Page loaded - jQuery Ready
$(document).ready(function () {
//User hovering over article. Change BG.
$(document).on('mouseenter', '.Article', function () {
if( !( $(this).hasClass('donotSelect') ) )
$(this).css('background', '#F0F8FF');
else
$(document).off('mouseleave', $(this));
}).on('mouseleave', '.Article', function () {
if( !( $(this).hasClass('donotSelect') ) )
$(this).css('background', '#FFFFFF');
else
$(document).off('mouseenter', $(this));
});
//Set active BG color if condition is met.
$('.LatestMediaID').each(function () {
var LatestMediaID = $(this).val();
//Disable mouseenter and mouseleave events on the matched Article.
if (LatestMediaID == $('#HiddenMediaID').val()) {
$(this).parent().addClass("donotSelect");
//Change BG color to light blue.
$(this).parent().css('background', '#F0F8FF');
}
});
});
solution2
0 2012-12-17 20:36:45
Not sure what his causing the problem, but you could avoid adding the events in the first place by checking the value up front.
Maybe use something like:
$(function() {
var hidID = $("#HiddenMediaID").val();
$(".Article").each(function(){
var article = $(this);
if(article.find(".LatestMediaID").val() !== hidID)
{
article.on("mouseenter", function(){ article.css("background", "#F0F8FF") });
article.on("mouseleave", function(){ article.css("background", "#FFFFFF") });
}
});
});
solution3
0 2012-12-17 20:41:21
There is a way to do it the way you want by adding another event on the selected article level http://api.jquery.com/event.stopPropagation/ from there, but thas is really ugly. Much cleaner to handle this via CSS http://jsfiddle.net/liho1eye/GE7Wg/4/
.selected, .hover { background-color:#F0F8FF;}
Script:
$(document).on('mouseenter mouseleave', '.Article', function(e) {
$(this).toggleClass("hover", e.type == "mouseenter");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.