Question

无论如何，我得到了这个打开我的导航按钮。

HAML：

%button#nav-toggle{ :navigate => 'false' } Menu

HTML：

<button id='nav-toggle' navigate='false'>Menu</button>

我正在点击两次点击它：

的jQuery

$(document).ready(function(){

  $("#nav-toggle[navigate='false']").click(function(){
    console.log("opening nav");
    $("#nav-toggle").attr('navigate','true'); 

    $( "#masthead" ).animate({
        height:'100vh',
    }, {
      duration: 1000,
      queue: false,
      done: function() {
        console.log("first done");  
      }
    }
    );
  });

  $("#nav-toggle[navigate='true']").click(function(){
    console.log("closing nav");
    $("#nav-toggle").attr('navigate','false'); 
    $( "#masthead" ).animate({
        height:'10vh',
    }, {
      duration: 1000, 
      queue: false,
      done: function() {
        console.log("second done"); 
      }
    }
    );
  });
});

出于某种原因，当我第二次单击该按钮时（当其navigate-attribute设置为true时，它仍会启动这两个中的第一个事件。

我在这里想念的男人和女孩是什么？

完整代码：Codepen

Answer 1

您需要委派活动。

看看这个 http://codepen.io/anon/pen/jAjkpA?editors=1010

您需要将事件绑定到父级，在这种情况下为.hamb-container。

这是一个了解授权和事件冒泡如何工作的链接https://learn.jquery.com/events/event-delegation/。

基本上是摘要：

当一个事件被触发时，它会将事件一直冒泡到你的根HTML标记。

这对于想要添加动态内容或在您的情况下挑选出动态变化的属性非常有用。

那么我们如何绑定动态内容？简单。我们用静态容器包围它们并绑定到它。另外，我们让JQuery知道动态内容是什么。因此，Jquery将监听静态元素上的事件，并检查它是否实际上源自您正在寻找的元素。

像这样

$( "#staticAncestor" ).on( "click", "#DynamicContent", function( event ) {

});

希望这会有所帮助。快乐的编码！

Answer 2

出于某种原因，当我第二次单击该按钮时（当其navigate-attribute设置为true时，它仍会启动这两个中的第一个事件。

我在这里想念的男人和女孩是什么？

你什么都没错。

事件绑定到元素而不是属性/属性。

因为 .click 是 .on（“点击”，处理程序）的快捷方式 ：

.on（events [，selector] [，data]，handler）：将一个或多个事件的事件处理函数附加到所选元素

因此，您可以更改代码，如：

$(function () {

  $("#nav-toggle[navigate='false']").click(function(){
    console.log("opening nav");

    var attr= ($("#nav-toggle").attr('navigate') == 'false' ? false : true);


    $("#nav-toggle").attr('navigate',!attr);

    if (!attr) {
      $( "#masthead" ).animate({
        height:'100vh',
      }, {
        duration: 1000,
        queue: false,
        done: function() {
          console.log("first done");
        }
      }
                              );
    } else {
      $( "#masthead" ).animate({
        height:'10vh',
      }, {
        duration: 1000,
        queue: false,
        done: function() {
          console.log("second done");
        }
      }
                              );
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<button id='nav-toggle' navigate='false'>Menu</button>

在一个按钮上绑定两个单击事件，其中不同的属性不起作用

2 个答案: