CODEWITHSUNDEEP
javascriptjquery
RaJesh RiJo
RaJesh RiJo

Reputation: 4400

JQuery - remove added class on body click

Check below snippet or this fiddler. I wanted to achieve two things from below snippet, that is

  1. Add .myBackground class while clicking on .myDiv
  2. Remove .myBackground when clicking somewhere else on body.

When am trying them separately they are working absolutely fine. But when I try to achieve both of them together not working as expected. I know both click events get fired when clicking on my div, that is why .myBackground not getting added. Is there any other way to achieve my requirement?

$(document).ready(function() {
  $(document).on('click', '.myDiv', function() {
    $(this).addClass('myBackground');
  });
  $(document).on('click', 'body', function() {
    $('.myDiv.myBackground').removeClass('myBackground');
  })
});
.myDiv {
  height: 100px;
  width: 100%;
  background: cyan;
}

.myBackground {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv">
</div>

Any help appreciated. Thanks in advance.

Upvotes: 0

Views: 7137

Answers (4)

Syed Arif Iqbal
Syed Arif Iqbal

Reputation: 1427

$(function(){

	$(document).on('click', 'body', function(e) {
	    if ($(e.target).hasClass('myBackground'))
	        $('.myDiv').removeClass('myBackground');
	    else if ($(e.target).hasClass('myDiv'))
	        $('.myDiv').addClass('myBackground');
	});
	
});
body {
  height: 200px;
  width: 100%;
}

.myDiv {
  height: 100px;
  width: 100%;
  background: cyan;
}

.myBackground {
  background: red;
}
<div class="myDiv"></div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

try this

$(function(){

    $(document).on('click', 'body', function(e) {
        if ($(e.target).hasClass('myBackground'))
            $('.myDiv').removeClass('myBackground');
        else if ($(e.target).hasClass('myDiv'))
            $('.myDiv').addClass('myBackground');
    });

});

Upvotes: 0

Steven
Steven

Reputation: 1414

You need to add e.stopProgation(); some more info about it

var addBackground = function(e){
  e.stopPropagation();
  $('.myDiv').addClass('myBackground');
};

var removeBackground = function(){
    $('.myDiv.myBackground').removeClass('myBackground');
};

$(document).ready(function() {
  $('.myDiv').on('click',addBackground);
  $('body').on('click',removeBackground);
});
.myDiv {
  height: 100px;
  width: 100%;
  background: cyan;
}

.myBackground {
  background: red;
}

body
{
  height: 1000px;
  width: 100%;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<body>
<div class="myDiv">
</div>
</body>

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68393

You need to stop event from propagating-up till body level by adding 

e.stopPropagation()

Demo

$(document).ready(function() {
  $(document).on('click', '.myDiv', function(e) {
    $(this).addClass('myBackground');
    e.stopPropagation()
  });
  $(document).on('click', 'body', function() {
    $('.myDiv.myBackground').removeClass('myBackground');
  })
});
body
{
  height: 200px;
  width: 100%;
}

.myDiv {
  height: 100px;
  width: 100%;
  background: cyan;
}

.myBackground {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="myDiv">
</div>
</body>

Upvotes: 2

madalinivascu
madalinivascu

Reputation: 32354

You have the element in your body so when you click it registers both clicks ,use a if to trigger the remove only if the element is not the .myBackground/myDiv element

$(document).ready(function() {
  $(document).on('click', '.myDiv', function() {
    $(this).addClass('myBackground');
  });
  $(document).on('click', 'body', function(e) {
    if (!$(e.target).is('.myBackground'))
      $('.myBackground').removeClass('myBackground');
  })
});
body {
  height: 200px;
  width: 100%;
}

.myDiv {
  height: 100px;
  width: 100%;
  background: cyan;
}

.myBackground {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="myDiv">
  </div>
</body>

Upvotes: 3

Related Questions