CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Romain Caron
Romain Caron

Reputation: 257

Bootstrap dropdown and Jquery click function

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

Upvotes: 0

Views: 842

Answers (2)

Nitin Dhomse
Nitin Dhomse

Reputation: 2612

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

Upvotes: 1

Toni Michel Caubet
Toni Michel Caubet

Reputation: 20163

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

Upvotes: 1

Related Questions