jQuery Mobile 1.4.3弹出窗口在克隆页面中不起作用

debugcn 发表于 Dev

马修

我正在尝试从JQM 1.3.2升级到1.4.3，但遇到一个奇怪的问题。

我的主页显示了指向其他页面的链接列表。这些页面是通过克隆母版页动态生成的。这些页面包含一个应该打开一个弹出窗口的按钮。它与JQM 1.3.2兼容，而与JQM 1.4.3兼容。

克隆后，元素似乎没有正确增强。但是我尝试了新的EnhanceWithin（）函数，但没有成功。我也尝试了popup（）函数。

这是我的代码的简化版本：

<div data-role="page" id="home">
    <div data-role="header">
         <h1>JQM 1.3.2</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview">
            <li><a href="#pagemaster">Master</a>
            </li>
            <li><a href="#pageclone" class="clone">Clone</a>
            </li>
        </ul>
    </div>
</div>
<div data-role="page" id="pagemaster">
    <div data-role="header">
        <h1>Page</h1>
        <a href="#home" data-rel="back" data-role="button" data-icon="arrow-l" data-transition="slide">Back</a>
    </div>
    <div data-role="content">
        <a href="#mypopup" data-rel="popup" data-role="button">Open Popup</a>
    </div>
    <div data-role="popup" id="mypopup">
        <div data-role="header">
            <h1>My Popup</h1>
        </div>
        <div data-role="content">This popup is working correctly</div>
    </div>
</div>

和javascript：

$(function() {
    $(".clone").click(function(event) {
        event.preventDefault();
        $("#pagemaster").clone().appendTo("body").attr("id", "pageclone");
        $.mobile.changePage("#pageclone");
    });
});

这是使用JQM 1.3.2的工作提琴：http : //jsfiddle.net/matthieubrunet/EsZ4F/1/

这是与JQM 1.4.3无关的小提琴：http : //jsfiddle.net/matthieubrunet/xrfAf/

如果单击主链接，则弹出按钮将起作用，但如果单击克隆链接，则该按钮将不起作用。

非常感谢你的帮助。

马修

当弗雷德里克·哈米迪（FrédéricHamidi）在评论中为我提供解决方案时，我回答了我的问题以将其关闭：我只需要更新我的ID，使其保持唯一，就可以了！

请注意，我在控制组中也有类似情况，但这一次是因为我在clone（）之后调用了page（）函数。对于1.3，这是必要的，但对于1.4，已不再是必需的。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。