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

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

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

Answer 2

在init之外移动以下内容并将其更改为

$(document).on("click","#close", CloseBanner);
$(document).on("click","#download", SetAppStorePath);

当页面init执行时，DOM尚未就绪。这就是它没有绑定到关闭或下载元素的原因。这是解决这个问题的方法。你不需要这里的pageinit活动

pageinit内的点击事件仅在页面刷新后有效

2 个答案: