gpt4 book ai didi

javascript - 在一个按钮上绑定(bind)两个具有不同属性的单击事件不起作用

转载 作者:行者123 更新时间:2023-11-30 15:52:14 24 4
gpt4 key购买 nike

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

HAML:

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

HTML:

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

我像这样绑定(bind)两次点击:

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

最佳答案

您需要委托(delegate)事件。

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

在本例中,您需要将事件绑定(bind)到父级 .hamb-container

这是了解委托(delegate)和事件冒泡如何工作的链接 https://learn.jquery.com/events/event-delegation/ .

基本上作为一个总结:

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

当您想添加动态内容或在您的情况下选择一个动态变化的属性时,这很有用。

那么我们如何绑定(bind)到动态内容呢?简单的。我们用静态容器包围它们并绑定(bind)到它。此外,我们让 JQuery 知道动态内容是什么。因此 Jquery 将监听静态元素上的事件并检查它是否真的源自您要查找的元素。

像这样

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

});

希望这对您有所帮助。编码愉快!

关于javascript - 在一个按钮上绑定(bind)两个具有不同属性的单击事件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39145230/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com