在一个具有不同属性的按钮上绑定两个单击事件无法工作

Binding two click events on one button with different attributes not working

本文关键字：两个 绑定 单击 工作 事件 属性 一个 按钮      更新时间：2023-09-26

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

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

由于某种原因，当我第二次单击按钮时(当它的navigation -attribute被设置为true时，它仍然启动这两个事件中的第一个事件。

我在这里错过了什么?

完整代码在这里:Codepen

你需要委派这个事件。

看看这个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 ) {
});

希望这对你有帮助。编码快乐!

由于某种原因，当我第二次单击按钮时(当它的navigation -attribute被设置为true时，它仍然启动这两个事件中的第一个事件。

我在这里错过了什么男孩和女孩?

你什么都没错过。

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

因为。单击是的快捷方式。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>

相关文章：