Home/ Questions/Q 9003869
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T00:46:09+00:00

I seem to be having some trouble removing some events from an element using

  • 0

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;    
}

​

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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');
        }
    });

});

    http://jsfiddle.net/GE7Wg/5/

    • 0