javascript - Bootstrap下拉和Jquery点击功能

Question

当有人点击我的下拉列表中的某个元素时，我尝试执行操作。

不明白为什么，点击功能不起作用。

我的html代码:

<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>

我的 Jquery 代码:

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

它永远不会进入点击功能。

谢谢

Answer 1

看起来你的 JavaScript 代码在这些元素存在之前就被执行了，

我建议你这样尝试

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