Question

我是网络编程的新手，目前正在建立一个快速响应的网站。在window resize事件中，右侧BAR通过insertBefore（）和appentTo（）方法移动。但在那之后，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() });

如何让事件处理程序工作？

Answer 1

当您的侧边栏被删除，然后动态添加到页面时，您必须以这种方式选择它：

$(document).on('mouseover', '#sideBar', function() {
    alert('hello');
});

jQuery在加载时附加事件，因此如果从页面中删除元素，则会删除附加到它的所有事件处理程序。这就是为什么你必须通过在$(document)元素上调用事件来委托。

工作JSFiddle example。

Answer 2

尝试：

$('#sideBar').appendTo('#navbar').remove();

Answer 3

如果删除节点，该节点的处理程序也会删除。所以你应该重新绑定事件，或者只使用事件委托。 @Hulothe的方式是事件代表。

 $(document).on('mouseover', '#sideBar', function() {
    alert('hello');
});

事件处理程序在窗口大小调整后移动元素后无法正常工

3 个答案: