How to differentiate the click function for nested element tag using jQuery?

Question

I have two elements which are nested and I want to make two click functions. My body tag is for a complete page and I have a button tag which is inside the body tag.

When the user clicks the button I want to add text in my input textbox. When the user clicks outside of the button, which is inside body tag I have to remove text from the textbox.

$(document).ready(function() {
  $("button").click(function() {
    alert("only button is clicked");
    $("input:text").val("Test");
  });

  $("body").click(function() {
    alert("body clicked");
  });
})

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

<input type="text" id="setName" value="" /><br/><br/><br/>
<button>Set the value of the input field</button>

Rory McCrossan · Accepted Answer · 2018-10-10 08:48:58Z

7

While it's possible to identify the clicked element in the body click handler, it would be much easier to just call stopPropagation() within the button click handler to stop the event bubbling at all:

$(document).ready(function() {
  $("button").click(function(e) {
    e.stopPropagation();
    console.log("only button is clicked");
    $("input:text").val("Test");
  });

  $("body").click(function() {
    console.log("body clicked");
    $("input:text").val(''); // add this line to remove the text
  });
})

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

<input type="text" id="setName" value="" /><br/><br/><br/>
<button>Set the value of the input field</button>

edited Oct 10, 2018 at 8:48

answered Oct 10, 2018 at 8:43

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

Comments

T.J. Crowder · Accepted Answer · 2018-10-10 08:48:03Z

2

Rory's answer is spot-on (as usual). Another option is to just use one handler on body and use closest to figure out whether the click passed through the button en route to body, see comments:

$(document).ready(function() {
  $("body").click(function(e) {
    // Did this click pass through the button?
    if ($(e.target).closest("button").length) {
      // Yes
      alert("only button is clicked");
      $("input:text").val("Test");
    } else {
      // No
      alert("body clicked");
    }
  });
})

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

<input type="text" id="setName" value="" /><br/><br/><br/>
<button>Set the value of the input field</button>

answered Oct 10, 2018 at 8:48

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

1 Comment

Liam neesan Over a year ago

This is the correct solution instead of using e.stopPropagation() function.

Ajay · Accepted Answer · 2018-10-10 08:55:15Z

0

You can track the target of whichever element clicked via event.target and then perform the requisite operation

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

<body class="container">   
    <input type="text" id="setName" value="" />
    <button id="samplebtn">Set the value of the input field</button>
</body>


$("body").click(function(event) {
    if (event.target.id == "samplebtn") {
        //do button related work
    } else {
        //do other stuff
    }
});

answered Oct 10, 2018 at 8:55

Ajay

6532 gold badges11 silver badges27 bronze badges

5 Comments

T.J. Crowder Over a year ago

That's what my answer does, except this doesn't allow for the fact that button elements can have elements inside them (for instance: <button><em>Emphasized Button</em></button>). That's why I used closest. :-)

Ajay Over a year ago

What if the button gets changed to some input type, say textbox. Will that work then?

T.J. Crowder Over a year ago

Yes. closest starts with the element itself. If you mean would it keep working even if you didn't change its selector, then no, of course it wouldn't. Just like one relying on an id won't work if you change the id. If you make a fundamental change, you need to handle that change throughout.

Ajay Over a year ago

DOM Manipulations are largely done on the basis of attributes in a html element. Assume of an agile methodology which totally start relying on the "type" of html element, then, I will have to make multiple changes and go through all those iterations.

T.J. Crowder Over a year ago

In my experience, there's no basis for that statement whatsoever. Whatever. Happy coding.

Collectives™ on Stack Overflow

How to differentiate the click function for nested element tag using jQuery?

3 Answers 3

Comments

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related