Javascript 绑定代码只在一个页面上执行，重定向后它停止工作。移动jQuery

下面是情景

我正在使用移动jQuery。这意味着我的HTML将使用ajax进行更新

我在顶部有一个导航菜单

我有两页（ID=“#P1”和ID=“#P10”）。两个页面包含相同的导航菜单

当用户单击菜单上的图标时，它应该将我的一个div滑入屏幕。当用户单击“x”或在新div之外时，它应该被关闭

我正在使用下一个JS代码处理这个问题

$(document).bind('pageinit', function() {
    alert('TEST');

$(document).on('click' , '.menu_open' , function() {  

  $('.mask').addClass('mask_visible');
  $('#menu').animate({  
  marginLeft: "0%",  
  opacity: 1  
  }, 200);  
  $('#menu').css('display', 'block');  
});  


$(document).on('click','.menu_close , .mask ', function() {  
  $('.mask').removeClass('mask_visible');
  $('#menu').animate({  
  marginLeft: "-100%",  
  opacity: 0  
  }, 200);  
});  

$(document).on("swipeleft", '#menu', function(){
  $('.mask').removeClass('mask_visible');
    $('#menu').animate({  
  marginLeft: "-100%",  
  opacity: 0  
  }, 200);  
});

});

当前，此代码放在所有脚本之后

问题是我的代码只在我加载的第一页上起作用。

---

重定向到第二个页面后，我的“警报”代码将触发，但我将无法再拉出导航栏。

如果此Javascript执行两次，似乎会创建重复的绑定。在每个事件中添加一个

console.log

，以便您知道它们何时触发。您可能只需要在初始页面加载时运行此JS块。好的，我将脚本放入其中，加载后执行一次。一旦我转到第10页，它就会再次执行。我想这与jquery手机如何更新页面有关。我想是使用ajax吧。但我还是不知道该怎么处理。下面是帮助我的内容$.mobile.ajaxEnabled=false；这是我在pageinit之后添加的内容。现在它不使用ajax进行重定向，所以每次重定向后我的代码都会被绑定。