Question

我有一个页面，可以让菜单下拉以显示响应行为。因此很明显，只有当屏幕较小时，选择标签才会显示在图片中。我想将jquery应用于该选择框以及当时动态添加的其他两个按钮。

我提到这个问题： Event binding on dynamically created elements?

但它并没有帮我解决问题。任何人都可以解释我哪里出错了？

我使用this jquery在我的页面中删除菜单。 - 仅供有人需要参考。

以下是我的尝试：

<div id="nav" role="navigation"> 
            <a href="#nav" title="Show navigation" id="shownav">
                choose one
                <img src="images/dropmenu-arrow.png" alt="" class="droparrow">
            </a> 
            <a href="#" title="Hide navigation" id="hidenav">
                choose one
                <img src="images/dropmenu-arrow.png" alt="" class="droparrow">
            </a>
            <ul class="clearfix" id="kat-drop">
                <li><a href="#">list item 1</a></li>
                <li><a href="#">list item 2</a></li>
                <li><a href="#">list item 3</a></li>    
            </ul>
      </div>
<script src="js/doubletaptogo.min.js"></script>       
        <script>

            $( function()
            {
                $( '#nav li:has(ul)' ).doubleTapToGo();

            });// upto this-it runs fine giving me dropmenu for desired screen

            $(document).on("click",$("#shownav"), function(){
                //alert("clicked"); // this didn't work neither the rest of the code from here
                 if($("#kat-drop").css("display")=="block"){

                      $("#kat-drop").slideUp();
                 }
                 else{

                      $("#kat-drop").slideDown();
                 }
            } );


        </script>

修改 - 1

好的，我已将其删除为ask.it's现在：

$(document).on("click","#shownav", function(){
        event.preventDefault();   // i want to prevent reloading of page too which doesn't work for now.                

} );

$(document).on("click","#shownav", function(){
         alert("clicked"); // Still I am not getting this alert
         if($("#kat-drop").css("display")=="block"){

              $("#kat-drop").slideUp();
         }
         else{
              $("#kat-drop").slideDown();
         }

} );

编辑 - 2

既不会阻止重新加载页面也不会让我警觉。

 $(document).on("click","#shownav", function(event){
                event.preventDefault();   // i want to prevent reloading of page too which doesn't work for now.                

        } );
 $(document).on("click","#shownav", function(event){
                alert("clicked");// not working yet         

        } );

Answer 1

只需更改您的代码：

$(document).on("click",$("#shownav"), function(){

到此：

$(document).on("click", "#shownav", function(){

因为，使用event delegation时的正确语法如下：

$( selector ).on( events, selector, handler)

<强>更新

但它仍然是整个页面的清新，这是我唯一的事情想要阻止隐藏/显示菜单。

您只需要使用.preventDefault()阻止锚点的默认点击操作，例如：

 $(document).on("click", "#shownav", function(e){
      e.preventDefault();
      // your code here..
 });

Fiddle Demo

在您编辑的代码中：

$(document).on("click", "#shownav", function (event) {
    event.preventDefault(); 
});

$(document).on("click", "#shownav", function (event) {
    alert("clicked"); // not working yet         
});

您已将两个事件处理程序附加到同一元素。只需分配一个这样的事件处理程序：

$(document).on("click", "#shownav", function (e) {
    e.preventDefault(); 
    alert("clicked");
});

并查看结果，就像我提供的小提琴演示一样。

Answer 2

第二个参数应该是字符串选择器，您传递的是jQuery对象

$(document).on("click","#shownav", function(){});

Answer 3

改变这个：

$(document).on("click",$("#shownav"), function(){

到此：

$(document).on("click","#shownav", function(){

更新

$(document).on("click","#shownav", function(event){ //<--pass the event here too
    event.preventDefault();// <-----------stop the default behavior of anchor 
 });

还可以尝试另一个：

$(function(){
     $( '#nav li:has(ul)' ).doubleTapToGo();
     $(document).on("click","#shownav", function(event){ //<--pass the event here too
        event.preventDefault();// <-----------stop the default behavior of anchor 
     });
});// upto this-it runs fine giving me dropmenu for desired screen

在动态显示/隐藏元素上应用Jquery

3 个答案:

更新