为什么添加jquery mobile后点击事件绑定两次？答案

【问题标题】：Why is click event binding twice after adding jquery mobile?为什么添加jquery mobile后点击事件绑定两次？
【发布时间】：2013-08-14 17:51:15
【问题描述】：

我正在开发一个 MVC Web 项目，该项目使用jquery 在单击a 标记时切换div。它工作正常。然后我将jquery.mobile 添加到项目中，现在所有的点击事件都触发了两次。我将 click 事件的处理程序吐到控制台，看到它被绑定了 3 次，但实际上只触发了 2 次。我的猜测是jquery 和jquery.mobile 都是绑定和触发的。

这是 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Dashboard - Environmental Monitoring System</title>
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    <link href="/Content/site.css" rel="stylesheet"/>
    <link href="/Content/jquery.mobile.structure-1.3.1.css" rel="stylesheet"/>
    <link href="/Content/jquery.mobile.theme-1.3.1.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.6.2.js"></script>


    <script src="/Scripts/jquery-1.8.2.js"></script>
    <script src="/Scripts/jquery.mobile-1.3.1.js"></script>

</head>
<body>
    <div id="body">

        <section class="featured" id="feature-header">
            <div class="content-wrapper">
                <hgroup class="title">
                    <h1>Dashboard.</h1><br />
                    <h2>Display the status of all the sensors in the system.</h2>
                </hgroup>
            </div>
        </section>

        <section class="content-wrapper main-content clear-fix">                

            <div>
                <a href="#"style="position:relative;left: 6px;top:-6px;text-decoration:none;background-color:none;" id="feature-header-button"><span class="icon-plus" style="display:none;" id="feature-header-plus">&#9660;</span><span class="icon-minus" id="feature-header-minus">&#9650;</span></a>
                <script>
                    $("#feature-header-button").click(function () {
                        $("#feature-header").slideToggle("slow");
                        $("#feature-header-plus").toggle();
                        $("#feature-header-minus").toggle();
                    });
                </script>
                <div style="margin-left:75px;">
                    Content.
                </div>
            </div>

        </section>
    </div>
</body>
</html>

我可能会转而使用collapsible 和jquery.mobile，这工作正常，但我想了解这个问题，以防止它在未来引起问题。我已经阅读了大量关于使用pageinit 以及双重绑定和冒泡等的帖子，但仍然无法诊断和解决我的问题。谢谢。

【问题讨论】：

这听起来确实像是绑定和触发。您应该检查以仅根据用户的浏览器加载所需的 jQuery。
Seems fine，页面上还有其他代码在运行吗？
页面上没有运行其他代码。有一些CSS，但这不应该有任何影响。该代码仅与jquery 一起工作得很好，但在添加jquery.mobile 后开始触发两次。我的主要测试浏览器是 Chrome，但它也发生在 IE 中。想知道本地版本和jsbin 托管的版本有什么区别吗？
你看看我链接到的 jsbin，我没有检查处理程序，但它似乎只触发了一次。我基本上只是复制了您的代码减去 modernizr 脚本。
是的，我看到它工作正常。 modernizr 会导致问题吗？

标签： jquery jquery-mobile slidetoggle page-init jquery-mobile-collapsible

【解决方案1】：

所以，我改为链接jquery 和jquery.mobile 的最新版本，问题就消失了。不确定是什么冲突，但jquery 1.10.2 版和jquery.mobile 1.3.2 版在一起更快乐。现在让新版本自动包含在 MVC 包中。

感谢 cmets，帮助我排除故障并提供健全性检查。

【讨论】：