jquery - each / click function not working

Question

EDIT: this works, but not sure why?

  $('button').each(function() {
    $(this).bind(
        "click",
        function() {
            alert($(this).val());
        });
  });

I'm not sure why this isn't working... Right now, I'm just trying to output an alert with the button value, but it's not working on my page. I don't get any console errors in Firebug and can't see anything that would prevent it from working.

My HTML looks like this:

<table id="addressbooktable">
<thead>
    <tr>
        <th>Name</th>
        <th>Action</th>
    </tr>
</thead>

<tbody>
    <tr>
        <td>7892870</td>
        <td><button id="button-20" class="custom-action" value="XY89" name="info">Click</button></td>
    </tr>

    <tr>
        <td>9382098</td>
        <td><button id="button-21" class="custom-action" value="XY544" name="info">Click</button></td>
    </tr>

    <tr>
        <td>3493900</td>
        <td><button id="button-22" class="custom-action" value="XY231" name="info">Click</button></td>
    </tr>
</tbody>
</table>

And the code looks like this:

  $('button').each(function() {
    $(this).click(function() {
      alert($(this).val());
    }
  });

But, clicking on it does nothing at all? Am I using it incorrectly?

Probably not the problem, but you don't need the .each, you can use .click on a jQuery object with more than one node and it will bind them all. — Shurdoof
– Shurdoof, Commented Dec 21, 2010 at 16:24

hunter · Accepted Answer · 2010-12-21 16:24:40Z

20

You can bind all buttons with a click event like this, there is no need to loop through them

$(function(){
    $("button").click(function() {
        alert($(this).attr("value"));
    });
});

But a more precise selector might be:

$(function(){
    $("button[id^='button-'").click(function() {
        alert($(this).attr("value"));
    });
});

answered Dec 21, 2010 at 16:24

hunter

63.7k19 gold badges115 silver badges115 bronze badges

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

1 Comment

iamface Over a year ago

This is much more efficient, since the selector already holds reference to the elements, rather than treating each() element as a separate item.

Nick Craver · Accepted Answer · 2010-12-21 16:27:18Z

7

You're missing a );, and make sure your code is in a document.ready handler, like this:

$(function() {
  $('button').each(function() {
    $(this).click(function() {
      alert($(this).val());
    }); //missing ); here!
  });
});

This way it won't run until those <button> elements are in the DOM for $('button') to find them. Also, you can run .click() on a set of elements, like this:

$(function() {
  $('button').click(function() {
      alert($(this).val());
  });
});

answered Dec 21, 2010 at 16:27

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Comments

Ashraf Sada · Accepted Answer · 2015-07-06 15:03:47Z

1

You are missing ):

$('button').each(function(){
            $(this).click(function(){
                alert($(this).val());
            });
        });

answered Jul 6, 2015 at 15:03

Ashraf Sada

4,9632 gold badges49 silver badges50 bronze badges

Comments

Stuart Burrows · Accepted Answer · 2010-12-21 16:24:19Z

0

Yup. Try this:

$('button').click(function() {
      alert($(this).val());
  });

You may also want a return false or .preventDefault() in there.

answered Dec 21, 2010 at 16:24

Stuart Burrows

10.8k2 gold badges36 silver badges33 bronze badges

Comments

JasCav · Accepted Answer · 2010-12-21 16:31:54Z

0

You cannot use .val() method for button. You can use .attr() to get the value attribute. If you are using custom attributes then use data-attribute.

Try

$("button").click(function(){
    alert($(this).attr("value"));
});

edited Dec 21, 2010 at 16:31

JasCav

34.7k21 gold badges117 silver badges175 bronze badges

answered Dec 21, 2010 at 16:25

rahul

188k50 gold badges239 silver badges266 bronze badges

2 Comments

newbie-shame Over a year ago

Hi, thanks for the responses... After posting, I used "bind" and it seems to work... Wondering if someone can explain why it works in this case, but not in the original? I'm editing my post to show what I changed it to...

Nick Craver Over a year ago

@N00BNum1 - you ere missing a ); in your code, so it wasn't valid...see my answer :)

Collectives™ on Stack Overflow

jquery - each / click function not working

5 Answers 5

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related