Question

我正在尝试在更改其内容后显示弹出窗口。

这是我的标记：

<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/

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

我该如何解决？

提前致谢。

Answer 1

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

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

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

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

1 个答案: