在jquery mobile中没有页面刷新的Jquery验证无效

Question

我正在使用jquery validate.js在我的jquery移动应用程序中验证我的联系表单.当我通过url或页面刷新加载页面时,验证似乎完美无缺.但是当我从另一个刷新的页面链接返回联系表单时,验证将停止工作.

它刷新页面时有效.我尝试过以下方法:

1)在jquery mobile js之前包含contact.js.

2)data-ajax="false";

3)使用 bind

$(document).bind("mobileinit", function(){
      $.extend(  $.mobile , { ajaxEnabled: false });
});

4)使用jQuery Mobile刷新表单页面

5)使用 window.onload

window.onload = function() {
   if(!window.location.hash) {
    window.location = window.location + '#loaded';
    window.location.reload();
 }
}

5)Jquery-Mobile:如何重新加载/刷新内部页面

6)第一页加载后的一次页面刷新 Javascript仅适用于jQuery mobile中的页面刷新

但这些都不起作用.我需要做的是在导航到它时刷新页面一次.这是我与jquery mobile的联系表单代码.

<form method="post" action="" id="feedback" name="feedback">
     <input type="text" name="user_name" data-role="none" id="name" value="" placeholder= "Your name*" />
     <br />
     <input class="email" required="true" type="text" name="user_email" data-role="none" id="email" value="" placeholder="Your Email*" />
    <br />
    <textarea cols="70" rows="12" class="required" name="user_message" id="c_message" data-role="none" placeholder="Your message*">
   </textarea>
   <br />
   <input type="submit" value="Send" data-mini="true" data-role="none" data-inline="true" class="green_like" id="send" />
</form>

这是JS代码,位于"联系我们"表格中.

$(document).bind("pageinit",function(){

  $("#feedback").validate({

    submitHandler : function() {
        $.ajax({
            type:'POST',
            url :'/some/url',
            data: $('#feedback').serialize(),
            success: function(resp) {
                if(resp==1)
                {   
                    $("#success_post_contact").html('<label style="color:green;margin-left: 6px;" >Thank you for contacting us.</label>');

                }

            }
        });//end of ajax

     }//end of submit handler
   });//end of validate
});//end of document.bind

Answer 1

您没有尝试正确的方法。要了解这种情况，您需要了解 jQuery Mobile 的工作原理。它使用ajax来加载其他页面。

第一页正常加载。它的 HEAD 和 BODY 被加载到 DOM 中，它们在那里等待其他内容。加载第二个页面时，仅将其 BODY 内容加载到 DOM 中。当我说只有 BODY 内容时，我的意思只是一个页面 DIV（带有属性 data-role="page"），没有其他内容。此问题有多种解决方案，这里列出了一个列表。