在调整窗口大小时移动元素后，事件处理程序不工作
在调整窗口大小时移动元素后，事件处理程序不工作
提问于 2017-04-19 16:00:43
我是一个网络编程新手，目前正在建设一个响应式网站。在窗口调整大小事件中，通过insertBefore()和appentTo()方法移动右侧的sideBar。但在此之后，sideBar上的事件处理程序将不再起作用。
一个简单的事件处理程序方法：
$('#sideBar').mouseover(function(){
alert("hello");
});仅当我删除以下内容时才有效：
function setlayout(){
if($(window).width() <= 720){
$('#sideBar').insertBefore('#footer');
}else{
$('#sideBar').remove().appendTo('#navbar');
}
};
$(window).on('resize load', function(){ setlayout() });如何使事件处理程序工作？
回答 3
Stack Overflow用户
发布于 2017-04-19 16:02:58
当您的侧边栏被移除，然后动态添加到页面时，您必须这样选择它：
$(document).on('mouseover', '#sideBar', function() {
alert('hello');
});jQuery在加载时附加事件，因此如果从页面中移除该元素，则附加到该元素的所有事件处理程序也将被移除。这就是为什么您必须通过在$(document)元素上调用事件来委托事件的原因。
Stack Overflow用户
发布于 2017-04-19 16:12:27
尝试：
$('#sideBar').appendTo('#navbar').remove();Stack Overflow用户
发布于 2017-04-19 16:16:36
如果你删除一个节点，这个节点的处理程序也会被删除。所以你应该重新绑定事件，或者只使用事件委托。@Hulothe的方式是事件委托。
$(document).on('mouseover', '#sideBar', function() {
alert('hello');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43489854
复制相关文章
相似问题
腾讯云开发者
