jQuery Mobile event handler not always working

Question

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?

why do you bind it to `pageshow`? remove it as it'll work once `pageshow` event triggers only. — Omar, May 16 '13 at 13:35
The pageshow event is triggered everytime the page is loaded. This seems to work as expected, even the selectbox-object is found and the handler is added. — Oliver Matuschin, May 16 '13 at 13:43

score 1 · Accepted Answer · answered May 16 '13 at 13:46

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");
        }
    });
});

answered May 16 '13 at 13:46

Gajotres

57,309
16
102
130

Thanks for the tip! Binding the event handler with "on" and the selector parameter did the trick. I'm just curious why it didn't work without the selector element. But well... – Oliver Matuschin May 16 '13 at 14:34
Because you are using pageshow each time you return to the page yoz were binding click event again. That why I have used off to remove click event before applying it again. Second click event always negates the first one. Basically when you can always use delegated event finding were you bind an event to document and it will find it way to correct element. – Gajotres May 16 '13 at 14:38
You wrote "Second click event always negates the first one", what do you mean with that? Is this a special behaviour of the "on" method? I couldn't find anything in the documentation... – Oliver Matuschin May 16 '13 at 15:46
This is a special behavior of jQuery Mobile. I have an other answer where I have described this problem: http://stackoverflow.com/questions/14468659/jquery-mobile-document-ready-vs-page-events/14469041#14469041 search for topic: Prevent multiple event binding/triggering – Gajotres May 16 '13 at 15:48
So with "negates" you mean that another click handler is added to the element? This is also what I thought it would do. But then the alertbox should have popped up several times when triggering a selectbox change, which it didn't. – Oliver Matuschin May 16 '13 at 16:11

jQuery Mobile event handler not always working

1 Answers1