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.

Answer 1

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.

Answer 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>

Answer 3

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

Answer 4

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'