Bootstrap dropdown and Jquery click function

Question

I'm trying to make an action when someone click on a element of my dropdown.

I don't understand why, click function doesn't work.

My html code :

<div class="row">
                <div class="dropdown col-lg-12">
                    <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="true">
                        Veuillez sélectionner la manière dont vous souhaitez nous contacter
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a href="#" id="callback">Etre rappelé</a></li>
                        <li><a href="#" id="sendMail">Envoyer un message</a></li>
                    </ul>
                </div>
            </div>

My Jquery code :

var phoneForm = $("#phoneForm");
console.log($("#callback"));
console.log($("#phoneForm").hasClass("hidden"));
$("#callback").click(function(){
    console.log("entre dans la fonction click");
    if(phoneForm.hasClass("hidden")){
        console.log("entre dans le if");
        phoneForm.removeClass("hidden");
    }
});

Never it goes in click function.

Thanks

Are you putting this code inside $(function(){ /* code here*/ }) or $(document).ready(function(){ /* code here*/ }) ? — Toni Michel Caubet
– Toni Michel Caubet, Commented Dec 21, 2015 at 9:28

Toni Michel Caubet · Accepted Answer · 2015-12-21 09:31:30Z

1

It looks like your javascript code is getting executed before those elements exist,

I suggest you to try like this

  $(function(){ // Wait until you have all html printed
       var phoneForm = $("#phoneForm");
       console.log($("#callback"));
       console.log($("#phoneForm").hasClass("hidden"));
       $("#callback").click(function(){
          console.log("entre dans la fonction click");
          if(phoneForm.hasClass("hidden")){
             console.log("entre dans le if");
             phoneForm.removeClass("hidden");
          }
       });
   });

answered Dec 21, 2015 at 9:31

Toni Michel Caubet

20.3k59 gold badges219 silver badges390 bronze badges

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

1 Comment

Romain Caron Over a year ago

Thank you. It was the problem, I didn't wait the end of load. I had this function : jQuery(window).load(afterLoad);

Nitin Dhomse · Accepted Answer · 2015-12-21 09:45:01Z

1

Use JQuery version above 1.9.1 with following code $(function(){ // Wait until you have all html printed var phoneForm = $("#phoneForm"); console.log($("#callback")); console.log($("#phoneForm").hasClass("hidden")); $("#callback").click(function(){ console.log("entre dans la fonction click"); if(phoneForm.hasClass("hidden")){ console.log("entre dans le if"); phoneForm.removeClass("hidden"); } }); });

answered Dec 21, 2015 at 9:45

Nitin Dhomse

2,6321 gold badge15 silver badges27 bronze badges

Collectives™ on Stack Overflow

Bootstrap dropdown and Jquery click function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related