Question

我的jQuery Mobile弹出窗口在通过ajax加载时不再“弹出”。我点击弹出窗口但没有任何反应。

这是我用来加载包含弹出窗口的内容的代码：

$(document).on("pagecreate", ".main", function () {
    $('.links').on('click', 'a', function () {
        $('.container').load(url + '.bin', function () {
            $(".pops").popup();
        });
        return false;
    });
})

我尝试使用$( ".pops" ).popup();初始化弹出窗口，但这没有任何区别。

有谁知道我做错了什么？

提前致谢！

Answer 1

要让弹出窗口正常工作，它应该是页面div 的直接子。如果放在任何其他div内，它将会发生故障。

解决方案是在页面div 中添加占位符 div，.load("url .selector") ¹特别是popup div，将其替换为占位符，然后将其初始化为.popup()。

目标网页

<div data-role="page">
  <div class=".popup-place-holder">
    <!-- place holder for popup -->
  </div>
</div>

<强>弹出

<div data-role="popup" id="pop" data-history="false" data-dismissible="false">
  <a href="#" data-rel="back" class="ui-btn-right ui-btn ui-btn-b ui-corner-all ui-btn-icon-notext ui-icon-delete ui-shadow">Close</a>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing...</p>
</div>

<强> JS

$(document).on("pagecreate", function () {
    $(".any-button").on("click", function () {
        $(".popup-place-holder").load("URL #pop", function (data) {
            var popup = $(this).find("#pop"); /* find popup inside place-holder */
            $(this).replaceWith(popup); /* replace place-holder with popup div */
            popup.popup(); /* initialize popup */
        });
    });
});

Demo - Code

¹ .selector是弹出式div。

当通过ajax加载方法加载时，jQuery Mobile弹出窗口不会打开

1 个答案: