Prevent click event on certain child element using jQuery

In this post I am going to explain, how we can prevent click event on certain child element using jQuery.
Let’s say we have a HTML markup like this:

<div id="parent"> 
    <span id="one">Child One</span>
    <span id="two">Child Two</span>
    <span id="three">Child Three</span>
    <span id="four">Child Four</span>
</div>

The HTML markup here is quite a simple one. We have a parent div, which has four child elements with specific IDs, one, two, three and four. Now, before we prevent the click event on certain child element, lets say span with id “two” in our case, let us add the click event to all the child elements first.
Now, we can achieve this using jQuery like this:

$("#parent > span").click(function () {
    $(this).addClass('green').siblings().removeClass('green');
});

Explanation:

  1. Code in the first line
    $("#parent > span").click(function () {
    

    In the above code, we are binding a click event handler to all the spans inside the div element with the id as `parent`.

  2. Code in the second line
    $(this).addClass('green').siblings().removeClass('green');
    

    In the above code,  this  refers to the current span element being clicked and by wrapping  this  inside a  $() , we are creating a new jQuery object instance for it, so that we can apply the jQuery methods on the current span being clicked. The next method we applying to it is:-

    .addClass('green')
    

    Here, we are adding a class named  green  to the clicked span, using the  .addClass()  method. The next method we applying to it is:-

    .siblings()
    

    Here, we are trying to get all the siblings of the current span element being clicked. The  .siblings()  method allows us to search through the siblings of these elements in the DOM tree and construct a new jQuery object from the matching elements. The next method we applying to it is:-

    .removeClass('green')
    

    Here, we are removing the class named  green  from all the siblings of clicked span, using the  .removeClass()  method.

    In simple words, we are adding a class to the clicked span and then removing the same class from all the siblings of the spans, if they were previously added to any of them, so that we have only one span with the class named  green .

Demo:

Now comes the next part of the demo. Let’s say we have requirement like, we want the click event on all of the child spans except the span with id  two . So, we want that the  green  class will we added to all the child span elements on click, except the second span with id  two .

Now, we can achieve this using jQuery like this:

$("#parent > span:not('#two')").click(function () {
    $(this).addClass('green').siblings().removeClass('green');
});

Explanation:

  1. Code in the first line
    $("#parent > span:not('#two')").click(function () {
    

    In our modified jQuery code based on our new requirement, you will notice that all the part of the code is same except the selector part at first line. You will notice that our selector is modified from
     "#parent > span"  to  "#parent > span:not('#two')" 

    So, in order to prevent the click event on the span with id  two , we have used here the  :not()  selector. The  :not()  selector will select all elements that do not match the given selector  '#two' .

  2. For debugging purpose, you can also try the below code:-

    console.log('Child elements length: ' + $("#parent > span").length);	
    

    If you run the above code inside dom ready method and check the browser console, you will get ‘4’ as result, as we have only 4 child span elements inside the parent div with id  parent .

  3. Now if you run the below code:-

    console.log('Child elements length: ' + $("#parent > span:not('#two')").length);	
    

    You will get ‘3’ as result, as we have only 3 child span elements left inside the parent div after using the  :not()  selector. So, this way we can prevent the click event on certain child element.

Demo:

That’s it! If you have any comments or suggestion about this post, I would really appreciate it.
Happy Coding 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s