javascript - jQuery Mobile $ ("#popup").popup ("open");转换页面后不工作

Question

我有 2 个 JQM 页面和 1 个它们共享的弹出窗口。我有一个事件处理程序绑定(bind)到两者的“pagecreate”，里面有这样的代码:

$(document).on("pagecreate", "#home", function() {
    $("#cart-button").on("tap", function(event) {
        alert("home alerted");
        event.preventDefault();
        $("#cartContextMenu").popup("open", { x: event.pageX, y: event.pageY });
    });
});

$(document).on("pagecreate", "#cat-cart", function() {
    $("#cart-button").on("tap", function(event) {
        alert("cat cart alerted");
        event.preventDefault();
        $("#cartContextMenu").popup("open", { x: event.pageX, y: event.pageY });
    });
});

两个页面内的 HTML 弹出代码 JQM 页面标签:

<div data-role="popup" id="cartContextMenu" data-arrow="true">
    <a href="#cat-cart"><input class="create-a-new-order" data-icon="plus" type="button" value="Create Order" /></a>
    <a href="#cat-cart"><input data-icon="forward" type="button" value="4398230424" /></a>
    <a href="#cat-cart"><input data-icon="forward" type="button" value="4398230324" /></a>
    <a href="#cat-cart"><input data-icon="forward" type="button" value="CSOS8230948" /></a>
    <a href="#cat-cart"><input data-icon="forward" type="button" value="44948" /></a>
    <a href="#cat-cart"><input data-icon="forward" type="button" value="CFDXKJFJF" /></a>
</div>

当我单击/点击#home 页面上的按钮时，弹出窗口显示正常...当我转换到#cat-cart 并再次单击该按钮时，将触发警报，但不会显示 JQM 弹出窗口。

我做错了什么？

Answer 1

答案很简单，每次点击事件都绑定(bind)到第一个按钮出现，即第 1 页。

在每个页面上有一个不同的按钮。