JQuery function for multiple button event with same Id

Question

I am trying to call a JQuery function to occur fade in event for the buttons with same id, but it seems only first button in the brower can occur the event.

This is JQuery Function to "fade in" for buttons with Id="skip". Once click the button(Id="next"), other button(Id=skip) is doing fade in.

$(document).ready(function () {
    $('button[id^="next"]').click(function () {
        $("#skip").hide().fadeIn(5000);
    });
});

This is the button id="next"

 <button id="next" type="submit" value="2" name="submit">Next</button>

And This is button id="skip"

<div id="skip">
<form method="post" >
<input type="hidden" id="skip_ig" name="skip_ig" value=""></input>
<div id="fade"><button type="submit" value="3" name="submit">Skip >></button></div>
<?php include('includes/aftersubmit.php');
</form>
</div>

I have multiple buttons of these "next" and "skip". But only first "skip" button does fade-in, others are not. Is Jquery function can only call first button when there are multiple button with same id? Thank you for your help.

"multiple button with same id". There is your problem.

Brad M
– Brad M

2013-06-12 18:20:23 +00:00
Commented Jun 12, 2013 at 18:20 — Brad M
– Brad M, Commented Jun 12, 2013 at 18:20

user229044 · Accepted Answer · 2013-06-12 18:28:57Z

24

This is asked about a dozen times a day. The ID attribute must be unique within your document. You cannot have multiple elements with the same ID. This is undefined behaviour which typically manifests as only the first element being selected (presumably, at the browser level, subsequent duplicate IDs are ignored).

edited Jun 12, 2013 at 18:28

answered Jun 12, 2013 at 18:20

user229044♦

241k41 gold badges348 silver badges350 bronze badges

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

2 Comments

Beetroot-Beetroot Over a year ago

And Just in case there's any doubt, you cannot have multiple anythings with the same ID, not just buttons.

Taewan Over a year ago

You are totally right. It works well. Appreciate for your help!

Ian · Accepted Answer · 2013-06-12 18:21:49Z

20

You're using your attributes wrong. ID attributes should only be used once and should be unique. If you want multiple instances with the same identifier you should be using class attributes so instead of having

id="next"

you should have

class="next"

then just use the class selector as in

$(".next").click( function() {
    ...
});

and it should work for all of them

answered Jun 12, 2013 at 18:21

Ian

3262 silver badges8 bronze badges

Comments

jk. · Accepted Answer · 2013-06-12 18:29:40Z

1

Maybe something like this is what you want:

<button class="next" type="submit" value="2" name="submit">Next</button>
<div class="skip">
    <form method="post" >
        <input type="hidden" class="skip_ig" name="skip_ig" value=""></input>
        <div class="fade"><button type="submit" value="3" name="submit">Skip >></button> </div>
        Stuff here
    </form>
</div>


$(document).ready(function () {
    $('button[class^="next"]').click(function () {
        $(this).next($(".skip")).hide().fadeIn(5000);
    });
});

http://jsfiddle.net/tHcan/

answered Jun 12, 2013 at 18:29

jk.

14.4k4 gold badges45 silver badges58 bronze badges

1 Comment

Taewan Over a year ago

I fixed it Exactly as you did. Thank you so much!

Collectives™ on Stack Overflow

JQuery function for multiple button event with same Id

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related