jquery click filter on button elements

Question

In the past I've used the following format to create click event handlers in jquery for example if I have the following html

<div class="new-folder">Click me</div>

And then use this jQuery to assign a click handler and filter the click.

$('div').on('click','.new-folder',function(){});

That would catch all the clicks on a div element with the appropriate class, but only run the function if the element had a class of new-folder. and that works great.

But if I try to filter the click events on a button element like this:

<button type="button" class="new-folder">Click me</button>

The selector (below) doesn't work for me.

$('button').on('click','.new-folder',function(){});

If I move the class to the original item selector it does work. So this line (below) does work as expected.

$('button.new-folder').on('click',function(){});

I had always though the filter approach was better because it worked with dynamic content, i.e. if the button doesn't have the class or is added with code after the handler is assigned the filter approach works, but the approach without the filter will fail.

I'm sure there is something very simple I'm missing here. What is different about buttons?

Using jQuery 1.10.2 if that matters.

use $('body').on('click','button.new-folder',function(){}); — webdevanuj
– webdevanuj, Commented Jul 11, 2016 at 19:36

j08691 · Accepted Answer · 2016-07-11 19:38:08Z

3

The $('div').on('click','.new-folder',function(){}); format is jQuery's event delegation syntax for the .on() method. As the docs explain, the selector as the second argument is a descendant from the first selector in the statement (emphasis mine):

A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

So for $('button').on('click','.new-folder',function(){}); to work you need an element with the class .new-folder to be a descendant of a <button> element.

answered Jul 11, 2016 at 19:38

j08691

208k33 gold badges269 silver badges281 bronze badges

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

1 Comment

Rothrock Over a year ago

I had even read that page a couple of times when trying to figure this out. But somehow my eyes just glossed over the descendants.

Shadi Shaaban · Accepted Answer · 2016-07-11 19:47:30Z

2

This code:

$('div').on('click','.new-folder',function(){});

Would never trigger on:

<div class="new-folder">Click me</div>

Because the selector .new-folder fires on descendants of $('div'), which don't exist in this case.

I assume it was working for you because your code has a container div somewhere else in the HTML markup like:

<div>
.....
<div class="new-folder">Click me</div>
....
</div>

answered Jul 11, 2016 at 19:47

Shadi Shaaban

1,7081 gold badge11 silver badges17 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:44:14Z

1

try this:

$('body').on('click','button.new-folder',function(){});

That is, bind to an element that exists at the moment that the JS runs (body exists when the page loads), and supply a selector in the second parameter to .on(). When a click occurs on body element jQuery checks whether it applied to a child of that element which matches button.new-folder the selector.

for further reading

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Jul 11, 2016 at 19:39

webdevanuj

67512 silver badges22 bronze badges

Comments

DinoMyte · Accepted Answer · 2016-07-11 19:41:46Z

1

Here's the difference between the 2 expressions :

$('button').on('click','.new-folder',function(){}); // delegates a click event to the all the child elements with class 'new-folder' inside the button elements.
$('button.new-folder').on('click',function(){}); // delegates a click event to the element button with class 'new-folder'

answered Jul 11, 2016 at 19:41

DinoMyte

8,8781 gold badge21 silver badges27 bronze badges

Collectives™ on Stack Overflow

jquery click filter on button elements

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related