Jquery/JavaScript functions conflict?

Question

What I want to do is add/remove some class to/from my div. I have made a fiddle... Im new to js/jquery and I cant undestand why

 if ($('.div1').hasClass('active')){
    $('.div1').removeClass('active');

}

stop working after I add a second function. Do they conflict with each other or anything? If so is there any way to fix it? My goal is to achive removing .active while clicking the link or somewhere outside the div.

Just use toggleClass $('.div1').toggleClass('active'); Updated fiddle jsfiddle.net/tgowvehx/2 — Pugazh
– Pugazh, Commented Apr 18, 2017 at 7:32
yes they conflict (actually they perform recursive actions), Javascript is executed in the order it is written or otherwise, so the first function removes the class .active and when the second function is executed it ads the class back to it. — Dev Man
– Dev Man, Commented Apr 18, 2017 at 7:35
If the class is already present your mouseup handler is removing it just before the click handler runs. Here's one way to fix that: jsfiddle.net/tgowvehx/3 — nnnnnn
– nnnnnn, Commented Apr 18, 2017 at 7:38
Immortal Dude, thank you for clear explanation. Is there any solution to achive my goal? Can I somehow connect this two functions?:) — Megumin
– Megumin, Commented Apr 18, 2017 at 7:51

nashcheez · Accepted Answer · 2017-04-18 07:43:24Z

2

Basically your mouseup event handler and the toggle class functionalities are conflicting. One removes the .active class and the other adds it back.

You can add an additional check to your existing mouseup handler so that it omits for clicks on .mylink1 like:

if (!e.target.classList.contains("mylink1") && !container.is(e.target) && container.has(e.target).length === 0) { ... }

Check updated fiddle.

Refer code:

$('.mylink1').click(function() {
  if ($('.div1').hasClass('active')) {
    $('.div1').removeClass('active');
  } else {
    $('.div1').addClass('active');
  }
});

$(document).mouseup(function(e) {
  var container = $(".div1");
  if (!container.is(e.target) && container.has(e.target).length === 0 && !e.target.classList.contains("mylink1")) {
    $('.div1').removeClass('active');
  }
});

body {
  background: black;
}

.div1 {
  width: 100%;
  height: 0;
  background: yellow;
  text-align: center;
}

.active {
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="mylink1">
  Click Me
</a>

<div class="div1">
  <h1>need help :C</h1>
</div>

answered Apr 18, 2017 at 7:43

nashcheez

5,1931 gold badge30 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Megumin Over a year ago

Thanks! I think this is want i was looking for:))

Nitesh · Accepted Answer · 2017-04-18 08:05:30Z

Probably, what you want is to toggle 'active' class whenever 'clickme' link is clicked. Also, if 'active' class is already added, you want to remove that when clicked anywhere on the document. For this,

1) Why your code doesn't work:

You are using two events, mouseup and click: mouseup is always triggered just before click whenever same element is binded with both of these events. In your case same is happening.

When you click on 'myLink', you actually also trigger mouseup of document. This mouseup event removes 'active' class and click event adds 'active' class. That is why, whenever you click on 'myLink', active class is always added and you always see yellow color background.

2) Solution: Try using click instead of mouseup for document event binding and event.stopPropagation in click handler of 'myLink'.

fiddle: https://jsfiddle.net/tgowvehx/5/

code:

$('.mylink1').click(function(evt){
    evt.stopPropagation();
    if ($('.div1').hasClass('active')){
        $('.div1').removeClass('active');

    } else {
        $('.div1').addClass('active');
    }

});

$(document).click(function (e)
{

var container = $(".div1");


if (!container.is(e.target)
    && container.has(e.target).length === 0)
{
    $('.div1').removeClass('active');
}
});

Collectives™ on Stack Overflow

Jquery/JavaScript functions conflict?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related