javascript - Bootstrap下拉菜单和Jquery点击功能

当有人点击下拉菜单中的某个元素时，我正在尝试采取措施。

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

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

单击功能永远不会消失。

谢谢

最佳答案

看来您的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");
          }
       });
   });