在具有不同属性的一个按钮上绑定两个单击事件不起作用答案

【问题标题】：Binding two click events on one button with different attributes not working在具有不同属性的一个按钮上绑定两个单击事件不起作用
【发布时间】：2016-08-25 12:23:09
【问题描述】：

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

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

由于某种原因，当我第二次单击该按钮时（当它的导航属性设置为 true 时，它仍然会启动这两个事件中的第一个事件。

我在这里错过了什么？

完整代码在这里：Codepen

【问题讨论】：

您不能将事件绑定到$("#nav-toggle[navigate='true']")，因为在执行代码时，不存在这样的元素。您应该将点击事件直接绑定到按钮（没有属性选择器）并在点击处理程序中决定您想要做什么（您仍然可以获取/设置属性）。
您可以绑定单击并在函数内部检查属性并执行您的逻辑

标签： javascript jquery events jquery-events jquery-click-event

【解决方案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 ) {

});

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

【讨论】：

好的，这更好，因为你甚至给它一个礼貌的结尾，我会接受这个：D 谢谢！
当然。我只是想确保您从根本上理解为什么您的代码不起作用，而不是为您提供替代方案。干杯
哈哈。肯定的事。但请查看事件委托。它多次救了我的命

【解决方案2】：

由于某种原因，当我第二次单击该按钮时（当它的导航属性设置为 true 时，它仍然会启动这两个事件中的第一个事件。

我在这里想念什么？

你什么都没错过。

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

因为 .click 是 .on( "click", handler ) 的快捷方式：

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

【讨论】：