JQuery移动动态弹出窗口和箭头

JQuery mobile dynamic popup and arrows

本文关键字：窗口 移动 动态 JQuery      更新时间：2023-09-26

我试图显示一个弹出后，我已经改变了它的内容。

这是我的标记:

<div id="welcome" data-role="page" class="js" data-theme="a">
    <header data-role="header" data-position="fixed" data-theme="a">
        <a href="#prop-popup" data-role="button" data-rel="popup" >Popup</a>
        <a id="btn" href="#" data-role="button" data-rel="popup" >Popup2</a>
        <h1>Page title</h1>
    </header>
    <div id="welcome-main" role="main" class="ui-content">
        Page content
    </div>
    <div id="prop-popup" data-role="popup" data-inset="true" data-theme="a" data-arrow="t">
        Popup content
    </div>
</div>

这是我的JavaScript:

$(document).on("click", "#btn", function(e) {
    $("#prop-popup").html("Blablabla");
    $("#prop-popup").popup("open", {
        arrow: "t",
        positionTo: "#btn"
    });
});

点击此处:https://jsfiddle.net/robbyn/oLde37dg/

现在第一个(左)按钮将正确显示弹出窗口，顶部有一个箭头。但是，如果我试图在显示之前更改弹出框的内容，就像第二个(右)按钮的情况一样，箭头将不会显示。

我怎样才能解决这个问题?

我找到了一个答案:销毁并重新创建弹出窗口:

$("#prop-popup").popup("destroy");
$("#prop-popup").html("Blablabla");
$("#prop-popup").popup().popup("open", {
    arrow: "t",
    positionTo: "#btn"
});

小提琴:https://jsfiddle.net/oLde37dg/1/

相关文章：