Search code examples
jqueryjquery-mobileslidetogglepage-initjquery-mobile-collapsible

Why is click event binding twice after adding jquery mobile?

I was working on an MVC web project that was using jquery to toggle a div upon the click of an a tag. It was working fine. I then added jquery.mobile to the project and now all the click events are triggering twice. I spit out the handlers for the click event to the console and saw that it was bound three times, but really only triggers twice. My guess is that both jquery and jquery.mobile are both binding and firing.

Here is the 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>

I will probably move to using collapsible with jquery.mobile which is working fine, but I want to understand this problem to prevent it from causes problems in the future. I have read tons of posts about using pageinit and double-binding and bubbling, etc, but still could not diagnose and fix my problem. Thanks.

Solution

  • So, I changed to link in the newest versions of both jquery and jquery.mobile and the problem disappeared. Not sure what the conflict was but jquery version 1.10.2 and jquery.mobile version 1.3.2 are much happier together. Now to get the new version to be automatically included in the MVC bundles.

    Thanks for the comments, that helped me troubleshoot and provide a sanity check.