Question

I’ve got a multi-file jquery phonegap app. I’m using phonegap 1.4.1, jQuery 1.7.1 and jQuery Mobile 1.1.0 RC1

In the head of the index file I’ve got a script block that fires on pageinit of a page called “kkpage”.
The block controls the submission of a form, as well as dynamic hiding/showing of elements on “kkpage”.

If submission is successful it transfers you to another page giving you the option to fill out the form again.

When going back to “kkpage” the script-block for the page seems to have fired twice: when pressing the submit button (“#kkopendialog”) the confirmation dialog opens twice allowing the user to press yes, thus submitting, twice

How can I get the code to run only once or remove/stop the code once the user submits the form?

I’m using changepage to navigate the app and I’m preloading pages using mobile.loadPage

The delegate code:

$( document ).delegate("#kkpage", "pageinit", function() {
...
});

I’ve been looking around here, googling and checking the jQM forums but none of the solutions have worked for me.
I’ve tried using jquery’s .one, .die and, .unbind as well as if conditions but to no avail.

Any and all help is deeply appreciated!

UPDATE: MORE CODE BELOW

Index:

$( document ).delegate("#kkpage", "pageinit", function(event) {
$("#klinikkurt #KKopendialog").click(BlurIt2);                        
function BlurIt2() {
$("#klinikkurt #q15").blur();
$("#klinikkurt #q16").blur();
}   
function SubKK(button) {
if (button == 1){
$("#klinikkurt").submit();
}
else if (button == 2){
}
}
function showConfirmKK(cdata) {
navigator.notification.confirm(
'\304r du s\344ker p\345 att du vill skicka in din Kurtning?',  // message
SubKK,              // callback to invoke with index of button pressed
'Skicka in?',            // title
'Ja,Nej'          // buttonLabels
);
}
$('#KKopendialog').addClass('ui-disabled');
$("#KKopendialog").live('tap', function(event) {
showConfirmKK();
return false;
});
$("#klinikkurt").submit(function(e) {
$.mobile.showPageLoadingMsg();
var dataString = $("#klinikkurt").serialize();
$.ajax({
type: "POST",
url: "http://DOMAIN.se/script/kurt2/receive.php",
data: dataString,
datatype: "html",
success: function() {
$.mobile.changePage( "tackkk.html", { transition: "turn"} );
window.plugins.googleAnalyticsPlugin.trackPageview("KKifyllt");
}});
e.preventDefault();
});
});

“kkpage” contains a form as well as a submit button:

    <a href="#" id="KKopendialog" data-role="button">Skicka in</a>

Since it’s on multiple pages I didn’t know how to jsfiddle it

UPDATE 2: Form html as requested:

    <form id="klinikkurt" method="POST" target="result" ><input type="hidden" name="id" value="XXXX" /><input type="hidden" name="noframe" value="" />
                <h2>Placering / ort</h2>

                <div class="questioncontainer">
                    1.&#9;Placering<br />
                    <select name="q1" id="q1" data-theme="d">
                        <option value="null"> -- Välj alternativ -- </option>
                        <option id="24" value="24" >T9 Psykiatri</option>
                        <option id="25" value="25" >T9 Ögon</option>
                        <option id="26" value="26" >T9 Öron-näsa-hals</option>
                        <option id="27" value="27" >T10 Gynekologi</option>
                        <option id="28" value="28" >T10 Obstetrik</option>
                        <option id="29" value="29" >T10 Pediatrik</option>
                    </select><br /></div>

                <div class="questioncontainer">
                    2.&#9;Ort
                    <select name="q2" id="q2" data-theme="d">
                        <option value="null"> -- Välj alternativ -- </option>
                        <option id="1" value="1" >Arvika</option>
                        <option id="2" value="2" >Avesta</option>
                        <option id="3" value="3" >Bollnäs</option>
                        <option id="4" value="4" >Enköping</option>
                        <option id="5" value="5" >Eskilstuna</option>
                        <option id="23" value="23" >Tierp</option>
                        <option id="24" value="24" >Uppsala</option>
                        <option id="25" value="25" >Visby</option>
                        <option id="26" value="26" >Västerås</option>
                        <option id="27" value="27" >Örebro</option>
                        <option id="28" value="28" >Östhammar</option>
                    </select><br /></div>

                <div class="questioncontainer">
                    <div class="fewq">9.</div><div class="moreq">10.</div>&#9;I vilken grad fick du själv aktivt handlägga patienter (t.ex. leda rond, resonera/diskutera/föreslå diagnoser/utredningar/behandlingar)?
                    <div class="popupright">I allra högsta grad</div>
                    <div class="popupleft" style="position:relative;bottom:-30px">Inte alls</div>
                    <div style="position:relative;top:-25px;;">
                        <div data-role="fieldcontain">
                            <fieldset data-role="controlgroup" data-type="horizontal">
                                <legend>&nbsp;</legend>
                                <input type="radio" name="q11" id="1" value="1"/>
                                <label for="1"> &nbsp;</label>

                                <input type="radio" name="q11" id="2" value="2"/>
                                <label for="2">&nbsp;</label>

                                <input type="radio" name="q11" id="3" value="3"  />
                                <label for="3">&nbsp;</label>

                                <input type="radio" name="q11" id="4" value="4"  />
                                <label for="4">&nbsp;</label>

                                <input type="radio" name="q11" id="5" value="5"  />
                                <label for="5">&nbsp;</label>

                                <input type="radio" name="q11" id="6" value="6"  />
                                <label for="6">&nbsp;</label>
                            </fieldset>
                        </div>
                    </div>
                </div>

                <div id="kkreqmsg"><br><br>Oj då! Du kan tyvärr inte skicka in en kurtning utan att ange termin och placering!</div>


                <a href="#" id="KKopendialog" data-role="button">Skicka in</a>
            </form>

Answer 1

The solution I came up with for the site I’m working on was delegating the click events as well as the pageint event:

$('body').delegate('#page', 'pageinit' ,function(){
    $('#page').delegate(selector, 'click', function(e){...});
});

Hope this works for you too.