无论如何,我有这个按钮应该打开我的导航。
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>