php - Jquery Mobile 和 .load 函数

Question

我正在尝试将我的网站转移到 jquery mobile 中，但在使用时遇到错误:

$('#information').load('getRegister.php'  , function() {
                    $('#preloader').hide(); 
                });

此函数被调用以将 html 代码动态加载到页面中而无需刷新，但出现的代码与网站中已有代码的 css 不匹配。您可以在下面的屏幕截图中看到这一点 :

我很困惑为什么按钮和文本字段不采用已加载到页面中的表单的样式。 .load 调用的代码是这个 php 文件:

<?php
  require ('myConnectDB.inc.php');     

// echo registration form

echo "

<p class=\"center\"> &nbsp;</p>

<form name=\"input2\" action=\"\" onsubmit =  \" return register()\" method=\"post\"  data-ajax=\"false\">
                    <p class=\"center\"> User Name: 
                    <input type=\"text\" name=\"user\"  id=\"userRegister\" /></p>
                    <p class=\"center\"> &nbsp;</p>
                    <p class=\"center\"> Email: 
                    <input type=\"text\" name=\"user\"  id=\"emailRegister\" /></p>
                    <p class=\"center\"> &nbsp;</p>
                    <p class=\"center\"> Password: <input type=\"password\" name=\"password\" id=\"passwordRegister1\" /></p> 
                    <p class=\"center\"> &nbsp;</p>
                    <p class=\"center\"> Re-Type Password: <input type=\"password\" name=\"password\" id=\"passwordRegister2\" /></p> 
                    <p class=\"center\"> &nbsp;</p>
                    <p class=\"center\"> 
                    <input type=\"submit\"  class=\"  button blue\" name = \"login\" value=\"Register\" />
                    </p>
            </form>";   
?>

Answer 1

您需要在新添加的内容上触发create 事件。

来自Docs

If you should generate new markup client-side or load in content via AJAX and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (see below).

For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event to automatically transform all the widgets it contains (inputs

and buttons in this case) into the enhanced versions. The code for this scenario would be:

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

在您的情况下，您可能需要类似以下内容

$('#information').load('getRegister.php'  , function() {
        $('#preloader').hide(); 
        $('#information').trigger("create");
 });