javascript - jQuery移动面板事件未触发

Question

我似乎无法与此处看到的 jquery 移动面板事件相关联

http://jquerymobile.com/demos/1.3.0-rc.1/docs/panels/events.html

$(document).on('beforeopen', ".ui-panel", function() {
    alert('open');
});
$(document).on('beforeclose', ".ui-panel", function() {
    alert('close');
 });

或者

 $(document).on('open', ".ui-panel", function() {
    alert('open');
});
$(document).on('close', ".ui-panel", function() {
    alert('close');
 });

甚至在面板上使用上下文

$('.ui-panel',context).on('open', function() {
    alert('opened');
});

其中 context 是当前页面的 jquery 对象变量

Answer 1

了解jQuery 移动 API

它提供beforeopen(event, ui)了类型为 的panelbeforeopen示例，它们在 API 文档中提供了这些示例：

beforeopen1) 使用指定的回调初始化面板：

$( ".selector" ).panel({
  beforeopen: function( event, ui ) {}
});

2) 将事件监听器绑定到panelbeforeopen事件：

$( ".selector" ).on( "panelbeforeopen", function( event, ui ) {} );

Answer 2

您必须将代码插入 $( document ).on( "pageinit", function( event, data ){.....

   $(document).on( "pageinit", function( event, data ){
     $( ".ui-panel" ).on( "panelbeforeclose", function( event, ui ) {
        // your code here
     } );
   });

Answer 3

您必须引用正确的 div 才能使其工作。您的选择器需要引用具有 data-role="panel" 的 div。

$(window).on("load",function(){

    $( "#your-panel-id" ).on( "panelclose", function( event, ui ) {
        alert ('hi') ;
    }); 
});