Question

我有一个带有自定义导航脚本的单页应用UI。该脚本在一个最小风格的测试页面中完美运行，但是当我将它带入实际的应用程序UI时，它开始变得不稳定，并且点击事件不会像我期望的那样持续发射。

我点击了绑定到每个链接的事件，但是当元素放在标题中时，事件似乎才会触发。

HTML

<header>
    <a data-role="navigation" data-target-view="mainView">Home</a>
    <a data-role="navigation" data-target-view="settings">Settings</a>
    <a id="headerLink" data-role="navigation" data-target-view="detailsView">Details</a>
</header>

<section data-role="page">
    <section id="mainView" data-role="view">
        <section class="pageContent">

        </section>

        <footer class="pageFooter">
            <a id="footerLink" data-role="navigation" data-target-view="detailsView">Details</a>
        </footer>
    </section>

    <section id="detailsView" data-role="view">
        <section class="pageContent">

        </section>

        <footer class="pageFooter">

        </footer>
    </section>

    <section id="settings" data-role="view">
        <section class="pageContent">

        </section>

        <footer class="pageFooter">

        </footer>
    </section>
</section>

处理程序注册

$(document).ready(function(){
    $("[data-role='navigation']")
        .unbind("click.cgt_pathfinder")
        .bind("click.cgt_pathfinder",function(event){
            alert("Triggered");
        });
});

我已经删除了实际的导航逻辑，以便更容易理解。

问题

当我加载页面时，我在处理程序注册时设置了断点，我可以看到$("[data-role='navigation']")检索到的所有元素。我看到了4个元素：<header>中的三个链接，以及.pageFooter的{{1}}部分中的一个单独链接。

您会注意到（除了ID属性及其在网页上的位置），#mainView和#headerLink相同。

当我点击#footerLink时，没有任何反应。我知道在我注册事件处理程序时拾取了元素，因此应发出“触发”警告消息，但事实并非如此。

我还尝试在文档周围移动#footerLink（一次拉一层并在每个站点进行测试。直到链接在#footerLink

当我点击<header>时，事件会按预期完全触发。在此示例中，我收到“触发”消息，在实际应用中，我看到一个成功的导航事件。

所以，问题是：“我错过了什么？” 与#headerLink不同，它阻止事件发生，但我不知所措。

Answer 1

可能是拼写错误和不平衡的标签

    <section data-role="page">
        <section id="mainView data-role="view">  // No (") for id
            <section class="pageContent">

            </section>

标记附近

        </settings>   // No opening tag for settings
    </section>

Working jsfiddle

Answer 2

我检查了你的情况。但它对我来说很好。

请用这个替换你的jQuery函数：

$(document).ready(function(){
    $("[data-role='navigation']").unbind("click.cgt_pathfinder").bind("click.cgt_pathfinder",function(event){
        alert("Triggered = "+$(this).text());
    });
});

Answer 3

您的代码是否动态更新#footerLink元素？

如果您的代码将此元素添加到页面中（例如：通过$('.pageFooter').append(html)），则需要将单击操作绑定回此新元素。

是否有其他代码（您的或某些插件）可能会改变您网页中的click事件处理程序，但不会改变您的标题？

仅当元素放置在标题中时才会触发Click事件

HTML

处理程序注册

问题

3 个答案: