.click function doesn't work for class if more element have this class

Question

This works fine:

$('.classname').click(function() {
  alert('');
});
<div class="classname">Click me!</div>

But this doesn't:

$('.classname').click(function() {
  alert('');
});
<div class="classname">Click me!</div>
<div class="classname">Click me!</div>

How can i fix this? Thanks for your help! (The script in tags, and the .click is in a document ready function)

That should work fine. Are you adding the extra elements dynamically? — James Allardice
– James Allardice, Commented Feb 7, 2013 at 11:59
Your code is working, check it here, jsfiddle.net/rajaadil/WsXBk — Adil
– Adil, Commented Feb 7, 2013 at 12:01
Can you clarify what you mean by "doesn't work"? Do you have any console errors? This code should work fine. — Christopher Thrower
– Christopher Thrower, Commented Feb 7, 2013 at 12:06
did you insert any node dynamically after page loaded, just as @JamesAllardice guessed? if so, please update your question. — Rain Diao
– Rain Diao, Commented Feb 7, 2013 at 12:19

DKSan · Accepted Answer · 2013-02-07 12:08:45Z

2

Just try this:

$('PARENTNODE').on('click', '.classname', function() {
  alert('');
});
<div class="classname">Click me!</div>
<div class="classname">Click me!</div>

The elements are added after your click handler is attached. By using .on() you enable it for future elements too.

Replace PARENTNODE with the parent you want to delegate to (eg. body)

edited Feb 7, 2013 at 12:08

answered Feb 7, 2013 at 12:01

DKSan

4,2073 gold badges27 silver badges35 bronze badges

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

Comments

Roger C · Accepted Answer · 2013-02-07 12:03:22Z

0

You're trying to target elements that don't exist at the moment where .click is called.

You could wrap the whole jquery code between $(function() { your code here }); or move the javascript after the two <div>.

answered Feb 7, 2013 at 12:03

Roger C

3051 silver badge5 bronze badges

1 Comment

James Allardice Over a year ago

The OP says that it works with one div so this is unlikely to be the problem.

Johan · Accepted Answer · 2013-02-07 12:19:58Z

0

I'm assuming that all the divs but the first one are added dynamically.

Use an event delegated approach:

$(function(){
    $(document).on('click', '.classname', function() {
        alert('');
    });
}),

edited Feb 7, 2013 at 12:19

answered Feb 7, 2013 at 12:06

Johan

35.4k62 gold badges191 silver badges309 bronze badges

1 Comment

DKSan Over a year ago

The order of the arguments is wrong. You have to flip '.classname' and 'click'

Rohan Kumar · Accepted Answer · 2013-02-07 12:24:03Z

0

Try this

$(document).ready(function(){
    $(document).on('click', '.classname', function() {
      alert('');
    });
});

Refer http://api.jquery.com/on/

edited Feb 7, 2013 at 12:24

answered Feb 7, 2013 at 12:00

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

2 Comments

James Allardice Over a year ago

How is that going to make any difference? That's exactly what jQuery does behind the scenes anyway.

Rohan Kumar Over a year ago

Refer answer here stackoverflow.com/questions/8601482/jquery-on-vs-click-methods

Collectives™ on Stack Overflow

.click function doesn't work for class if more element have this class

4 Answers 4

Comments

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related