2

I have an event handler which should be called after the value of a selectbox (id="save-login") has changed. The selectbox is displayed as a slider, hence I use the "slidestop" event. The page has a login button which submits a formular to the same URL location. After submitting the form the same page will be displayed again.

Unfortunately, after the first submit, the event handler will no longer be called when the selectbox value changes. If I submit the form for a second time, the handler will often work again.

This is the code of my page and the script which is used to bind the event handler:

<!DOCTYPE HTML>
<HTML>
    <head>      
        <link rel="stylesheet" href="jquery.mobile.structure-1.0.1.CSS" />
        <link rel="stylesheet" href="jquery.mobile-1.3.0.CSS" />

        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/jquery.mobile-1.3.0.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="login" data-theme="c">        
            <div data-role="content">
                <div id="loginform">
                    <form action="login_test.html" method="post" data-transition="flip">
                        <ul data-role="listview" data-inset="true" data-theme="c">
                            <li>
                                <label for="save-login">Login-Informationen speichern</label>
                                <select name="save-login" id="save-login" data-role="slider">
                                    <option value="0">Nein</option>
                                    <option value="1">Ja</option>
                                </select>                       
                            </li>
                        </ul>           
                        <input type="submit" value="Login" data-role="button">
                    </form>
                </div>
            </div>

        <script type="text/javascript">
        $(":jqmData(role='page')").on("pageshow", function(event) {
            var selectbox = $("#save-login");
            selectbox.on("slidestop", function(event, ui) {
                if (this.value == "1") {
                    alert("Autologin enabled");
                }
            });
        });
        </script>           

        </div>
    </body>
</HTML>

Does anybody have an idea of what is causing the event handler to not work correctly?

4

1 回答 1

1

Change your code to this:

$(document).off("pageshow", ":jqmData(role='page')").on("pageshow", ":jqmData(role='page')" ,function(event) {
    $(document).on("slidestop", "#save-login",function(event, ui) {
        if (this.value == "1") {
            alert("Autologin enabled");
        }
    });
});
于 2013-05-16T13:46:09.013 回答