Jquery .click() not working multiple button

Question

I want show alertbox on click button but more of button the some ID attr and work click on first button but not working click on second button.

Jquery;

jQuery("#submit").click(function(e){
     alert("message");
});

HTML; (Repeat html per message)

 <div class="reply">
   <form id="vivam" method="post" onsubmit="return false;"> 
      <textarea name="reply" placeholder="Write reply here"></textarea>
      <p class="stdformbutton">
          <button id="submit" class="btn btn-primary">Reply</button> 
      </p>
   </form>
 </div>

jsfiddle Link

What is the solution to this problem? Thank you in advance for answers.

Milind Anantwar · Accepted Answer · 2014-06-27 08:01:00Z

3

Approach 1: IDs should be unique, use class instead of id.

HTML:

<div class="reply">
<form id="vivam" method="post" onsubmit="return false;"> 
  <textarea name="reply" placeholder="Write reply here"></textarea>
  <p class="stdformbutton">
      <button class="btn btn-primary submit">Reply</button> 
  </p>
 </form>
</div>

JS:

jQuery(".submit").click(function(e){
 alert("message");
});

Working Demo Approach 1

Approach 2: You can also use attribute value selector to target element with same id. However this breaks the rule ids should be unique.and i do not recommend you using this:

jQuery("[id=submit]").on('click',function(e){
 e.preventDefault(); 
 alert("test");
});

Working Demo Approach 2

edited Jun 27, 2014 at 8:01

answered Jun 27, 2014 at 7:55

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

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

Comments

Tushar Gupta - curioustushar · Accepted Answer · 2014-06-27 07:55:16Z

1

ID Must be unique .

Handler get attached to the first element with the id only.

Use class instead of id .

Fiddle Demo

Change HTML

 <button class="btn btn-primary submit">Reply</button>
//                                 ^ add class submit and remove id submit

answered Jun 27, 2014 at 7:55

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

1 Comment

wbdvlpr Over a year ago

But not possible because must be repeat the form per data

C_F · Accepted Answer · 2014-06-27 07:58:09Z

0

Make it

jQuery(".submitbuttons").click(function(e){

and then

<button id="submit" class="btn btn-primary submitbuttons">Reply</button>

and please give unique ids and I recommend to set the button-type attribute (button or submit)

answered Jun 27, 2014 at 7:58

C_F

5401 gold badge4 silver badges17 bronze badges

Comments

Mathlight · Accepted Answer · 2014-06-27 08:06:11Z

You can use the on listener in JQuery. That way you listen on an class, and then do something with the id...

Here's an JSFiddle of the working code...

The HTML ( note that i've changed the ID's because ID's need to be unique, and add the class to the buttons ):

<div class="reply">
    <form id="vivam_1" method="post" onsubmit="return false;">
        <textarea name="reply" placeholder="Write reply here"></textarea>
        <p class="stdformbutton">
            <button id="button_1" class="btn btn-primary submit">Reply</button>
        </p>
    </form>
</div>
<div class="reply">
    <form id="vivam_2" method="post" onsubmit="return false;">
        <textarea name="reply" placeholder="Write reply here"></textarea>
        <p class="stdformbutton">
            <button id="button_2" class="btn btn-primary submit">Reply</button>
        </p>
    </form>
</div>

And the JQuery part:

$('body').on('click', '.submit', function () {
    e.preventDefault();
    alert("Clicked on button " + $(this).attr('id'));
});

Collectives™ on Stack Overflow

Jquery .click() not working multiple button

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related