1

我有一个页面，它使菜单下拉以进行响应行为。所以很明显，选择标签只有在屏幕较小时才会出现。我想将 jquery 应用于那个选择框和当时动态添加的其他两个按钮。

我指的是这个问题： 动态创建元素上的事件绑定？

但这并没有帮助我解决问题。谁能解释我哪里出错了？

我使用这个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

好的，我按照要求将其删除。现在是：

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

        } );
4

3 回答 3

3

只需将您的代码更改为：

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

小提琴演示

在您编辑的代码中：

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

并查看我提供的小提琴演示的结果。

于 2013-11-13T07:18:11.970 回答
2

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

$(document).on("click","#shownav", function(){});
于 2013-11-13T07:18:08.183 回答
2

改变这个：

$(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
于 2013-11-13T07:18:54.507 回答