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

不管怎么说，我有一个按钮可以打开导航

HAML:

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

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

HTML:

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

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

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

我在这里错过了什么

---

此处的完整代码：

您需要委派事件

看看这个

在本例中，您需要将事件绑定到父级

.hamb容器

这里有一个链接来了解委托和事件冒泡是如何工作的

基本上是一个总结：

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

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

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

当您想要添加动态内容或在您的情况下选择一个动态更改的属性时，这非常有用

那么我们如何绑定到动态内容呢？很简单。我们用一个静态容器将它们包围起来，然后绑定到它。此外，我们让JQuery知道动态内容是什么。因此JQuery将侦听静态元素上的事件，并检查它是否真的源于您要查找的元素

类似这样的东西

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

});

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

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

我在这里错过了什么

你什么都没错过

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

因为。单击。的快捷方式（“单击”，处理程序）：

.on（事件[，选择器][，数据]，处理程序）：将一个或多个事件的事件处理程序函数附加到选定元素

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

$（函数（）{
$（“#导航切换[navigate='false']”）。单击（函数（）{
控制台日志（“打开导航”）；
var attr=（$（“#导航切换”）.attr（'navigate'）=='false'？false:true）；
$（“#导航切换”）.attr（'navigate'，！attr）；
如果（！attr）{
$（“#报头”）。设置动画({
高度：'100vh'，
}, {
持续时间：1000，
队列：false，
完成：函数（）{
控制台日志（“首次完成”）；
}
}
);
}否则{
$（“#报头”）。设置动画({
高度：'10vh'，
}, {
持续时间：1000，
队列：false，
完成：函数（）{
控制台日志（“第二次完成”）；
}
}
);
}
});
})；

菜单

您不能将事件绑定到

$（“#nav toggle[navigate='true']”

），因为在执行代码时，不存在此类元素。您应该将单击事件直接绑定到按钮（不带属性选择器），并在单击处理程序中决定要执行的操作（您仍然可以获取/设置属性）。你可以绑定单击，然后在函数内部检查属性并执行逻辑OK，这更好，因为你甚至在它上面加了一个礼貌的结尾，所以我接受这个：D谢谢！当然。我只是想确保你从根本上理解为什么你的代码不起作用，而不是为你提供一个替代方案。谢谢是的。但一定要调查一下活动授权。它多次救了我的命