jQuery Mobile 页面加载事件委托 javascript 触发两次

Posted 2023-03-15

【中文标题】jQuery Mobile 页面加载事件委托 javascript 触发两次

【英文标题】：jQuery Mobile page load events delegated javascript fires twice

【发布时间】：2012-03-22 21:14:09

【问题描述】：

我有一个多文件 jquery phonegap 应用程序。我正在使用 phonegap 1.4.1、jQuery 1.7.1 和 jQuery Mobile 1.1.0 RC1

在索引文件的头部，我有一个脚本块，它在名为“kkpage”的页面的 pageinit 上触发。 该块控制表单的提交，以及“kkpage”上元素的动态隐藏/显示。

如果提交成功，它会将您转到另一个页面，让您可以选择再次填写表格。

返回“kkpage”时，页面的脚本块似乎触发了两次：按下提交按钮（“#kkopendialog”）时，确认对话框打开两次，允许用户按是，从而提交两次

如何让代码只运行一次或在用户提交表单后删除/停止代码？

我正在使用 changepage 来导航应用程序，并且我正在使用 mobile.loadPage 预加载页面

委托代码：

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

我一直在这里环顾四周，搜索并检查 jQM 论坛，但没有一个解决方案对我有用。 我尝试过使用 jquery 的 .one、.die 和 .unbind 以及 if 条件，但无济于事。

非常感谢任何和所有帮助！

更新：下面有更多代码

索引：

$( 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”包含一个表单和一个提交按钮：

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

由于它在多个页面上，我不知道如何 jsfiddle 它

更新 2：按要求形成 html：

    <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>

【问题讨论】：

发布更多代码或制作一个 jsFiddle 来说明问题，以便我们可以使用它。您的代码将帮助我确定您正在使用的 jquery 和 jquery mobile 版本等信息，因此我知道您可以使用哪些选项。

由于它在多个页面上，我不知道如何对其进行 jsfiddle。在上面添加了一些细节和一些代码。谢谢！

给我看看你的表单代码怎么样。

所以每次你回到这个页面时，表单都被提交了？

每次我提交成功后返回并按提交，我都会得到两个确认框，允许我提交两次

【参考方案1】：

我为我正在开发的网站提出的解决方案是委托点击事件和 pageint 事件：

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

希望这对你也有用。

【讨论】：

感谢它在 1.0.1 上工作，但我的解决方案在 1.1 上被破坏了，所以我现在正在尝试你的方法。更新：工作！谢谢一百万！