在jquery mobile中隐藏div内的按钮

Question

您好，我们使用 jquery mobile 和 mvc 开发 Web 应用程序。在一个标准中，我需要在页面加载时隐藏 div 内的按钮。在几个标准中，我需要显示按钮。

查看

<div id="ContentSerialNumberSearch">
                    <input type="submit" id="btnSerialScac" name="btnDPSearch"  data-theme="d" value="@Resources.ViewScac" data-ajax="false"/>
                    <input type="submit" id="btnSerialLane" name="btnDPSearch"  data-theme="d" value="@Resources.ViewLane" data-ajax="false"/>
                </div>

脚本

$(document).on("pageinit", function () {
       $('#btnSerialScac').closest('.ui-btn').hide();
       $('#btnSerialLane').closest('.ui-btn').hide();
   });

上面的代码效果很好。但是我使用了 pageinit 事件，所以即使我访问其他页面，每次函数都会执行。这将导致性能问题。所以我尝试了下面的代码。

脚本

 $( document ).on( "pagecontainershow",'#ContentSerialNumberSearch', function ( event, ui ) {
       $('#btnSerialScac').closest('.ui-btn').hide();
       $('#btnSerialLane').closest('.ui-btn').hide();
   });

所以我认为只有在特定的 div 加载到 dom 时才会执行上述脚本。但是 DOM 中的按钮并没有隐藏。我尝试了 pageshow,mobileinit 事件但没有用。请指导我。

Answer 1

我不是 100% 清楚您要达到的目标，但是要使用 pagecontainer 小部件事件进行显示，您可以这样做：

$("body").on( "pagecontainershow", function( event, ui ) {
       $('#btnSerialScac').closest('.ui-btn').hide();
       $('#btnSerialLane').closest('.ui-btn').hide();
});

或者用 ":mobile-pagecontainer" 代替正文

$(":mobile-pagecontainer").on( "pagecontainershow", function( event, ui ) {
       $('#btnSerialScac').closest('.ui-btn').hide();
       $('#btnSerialLane').closest('.ui-btn').hide();
});

这是一个DEMO

使用 pagecontainershow 将在您每次在页面之间导航时隐藏按钮。