如果更多元素具有此类，则.click函数不适用于类

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)

Answer 1

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)

Answer 2

Try this

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

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

Answer 3

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

Answer 4

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('');
    });
}),