Stop hover and click on element with not specific class attribute

Question

I want to disable the hover (and click) on elements which do not have a specific class name attribute:

<svg>
   <path class="myClass"></path>
   <path class="myClass active"></path>
</svg>

Basically if path has not attribute className "active" don't hover or click

Tried:

    if (!$("path").hasClass("active")) {
        $(this).unbind('mouseenter mouseleave');
    };

But I believe I should use .attr("class"..) since it is a svg path

with that you are saying to stop it when it has .active, i want the opposite, also i believe it has to be done by .attr — rob.m, Nov 06 '16 at 12:05
Instead of removing the event handler, why dont you set the event handler only on the elements having class active? — void, Nov 06 '16 at 12:05
@void because the code it is much more complex, at first i want to hover and click regardless of the .active class, then the whole interaction logic changes and I need what in the question — rob.m, Nov 06 '16 at 12:19

score 2 · Answer 1 · answered Nov 06 '16 at 12:06

2

You can add event handler only to element has .active class. But if you can't do it, use :not() selector to select element hasn't .active class.

$("path:not(.active)").unbind('mouseenter mouseleave')

answered Nov 06 '16 at 12:06

Mohammad

21,175
15
55
84

yes ok but how about targetting a class by using `.attr`? – rob.m Nov 06 '16 at 12:17
@rob.m `.attr("class")` return all content of class attribute. You should split result by space to find every class name. – Mohammad Nov 06 '16 at 12:19
exactly, i need to target a specific class (.active) within the whole class attribute – rob.m Nov 06 '16 at 12:20
1

@rob.m Glad to help. Also you can mark answer to finishing this discussion :) – Mohammad Nov 06 '16 at 13:50
i would like to, yet it is not answering 100% since I asked with the attribute while you answered with a class targhetting. It maybe confusing for other users landing on here – rob.m Nov 06 '16 at 13:58

four · Accepted Answer · 2016-11-08T08:40:08.910

This demo uses the .attr() function. with this you will have to loop through each desired element and loop its class list (if exist) and see if it contains the .active class if not then unbind the events of that element.

$('p').on('mouseenter', function() {
    $(this).css('background', 'blue');
})

$('p').on('mouseleave', function() {
    $(this).css('background', 'black');
})


$('p').each(function(indx, elem) {
    var activeNotFound = 1;
    var classes = [];
    if ($(elem).attr('class') !== undefined) { // check if elem has attribute class
     classes = $(elem).attr('class').split(" "); // split into array the attribute class
        $.each(classes, function(ndx, classname) { // loop each class to check if active exist
            if (classname === 'active') {
                activeNotFound = 0;
            }
          // removed the else part.
        });
    }
    
    if (activeNotFound) { // if no active class found unbind events
        $(elem).unbind('mouseenter mouseleave')
    }
})

div p {
    width: 100px;
    height: 100px;
    background: #000;
    border: 5px solid #000;
}

p.active {
    border: 5px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Note: I used a different element for this demo. Just change it to the needed elements and also update the script</h4>
<div>
    <p class="myClass"></p>
    <p class="myClass active"></p>
    <p></p>
</div>

Stop hover and click on element with not specific class attribute

2 Answers2