jQuery .click（）无法正常使用多个按钮

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.

Answer 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

Answer 2

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

Answer 3

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)

Answer 4

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