javascript - pageinit 内的单击事件仅在页面刷新后起作用

Question

我知道那里有很多重复的问题，我检查了几乎所有的问题，但我就是找不到针对我的情况的解决方案。所以，这是我的问题:

我有一个横幅，它将显示在项目的每个页面上，横幅内部有一个用于关闭横幅的关闭按钮，以及一个引导用户前往应用程序商店下载应用程序的下载按钮。我的横幅工作完美，除非我必须刷新页面才能使这两个按钮工作。这是我的代码:

$(document).on("pageinit", function () {
    $("#close").on("click", CloseBanner);
    $("#download").on("click", SetAppStorePath);
    //alert("pageinit");
});

function SetAppStorePath() {
    if (isIOS) {
        window.location = "https://itunes.apple.com/us/app/myapp/id.....";
}
    else if (isAndroid) {
    window.location = "https://play.google.com/store/apps/details?id=.....";
    }
}

function CloseBanner() {
    $('.banner').hide();
}

这是简化的 html:

<div class="banner">
    <div class="container">
        <a id="close">&times;</a>
        <a id="download">Download</a>
    </div>
</div>

我做了一个小测试，发现了一些棘手的事情:我在 pageinit 中添加了该警报，我注意到当我从页面 A 跳转到页面 B 时，警报总是被执行(意味着我的点击事件按钮总是被注册)。但是当按钮工作时，我看到页面 A 消失了，显示空白页面，显示警报，然后显示页面 B，按钮工作。当它不起作用时，顺序不同，我仍然可以看到页面 A，然后我看到警报(我现在仍然可以看到页面 A)，然后它更改为页面 B，按钮不起作用。

看来，当pageinit在页面跳转后执行时，它可以工作，但有时pageinit在页面跳转之前执行，则它不起作用。

Answer 1

我认为你的元素是动态创建的。您可能需要事件委托(delegate)。

$(document).on("pagecreate", function () {
    $("body").on("click", "#close", CloseBanner);
    $("body").on("click", "#download", SetAppStorePath);
});