如何使用ajax加载包含jQuery的页面并保持代码正常运行


how to load a page containing jQuery with ajax and keep the code functioning?

大家好,谢谢阅读。

我有一个问题,我不知道如何保持加载了ajax的页面的jquery代码的正常运行。问题是,在原始页面上执行代码,因此jquery框架已经加载,当ajax调用来加载另一个页面的数据时,我得到的是不起作用的jquery代码。从ajax页面加载的jquery代码不起作用。

如果我不清楚,请澄清,更多详细信息,代码如下:

我加载jquery页面的页面:

<?php 
ob_start();
include 'includes/chk.php';

?>
<script type="text/javascript">
    $(document).ready(function() {
    $('#account_link').click(function(){
            $.ajax({
                type: "POST",
                async:false,
                url: "ajax/settings_account.php",
                success: function(msg){
                    $('#div_container_sett_acc').replaceWith('<div id="div_container_sett_acc" style="text-align: center;">'+msg+'</div>');
                }
            });
        });
      $('#settings_link').click(function(){
            $.ajax({
                type: "POST",
                async:false,
                url: "ajax/settings_account.php",
                success: function(msg){
                    $('#div_container_sett_acc').replaceWith('<div id="div_container_sett_acc" style="text-align: center;">'+msg+'</div>');
                }
            });
        });   
   });

</script>

                <div class="ui-grid-a">
                    <div class="ui-block-a">
                        <ul data-role="listview" data-divider-theme="d" data-inset="true">
                            <li data-theme="c">
                                <a href="#settings" >
                                    Settings
                                </a>
                            </li>
                            <li data-theme="c">
                                <a href="#account" id="account_link" >
                                    Account
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div id="div_container_sett_acc">greg</div>

                </div>

<?php
    $pagemaincontent = ob_get_contents();
    ob_end_clean();
    $pageHead='';
    $home_page='ui-btn-active';
    $pageTitle ='';
    include("master.php");
?>

在正在加载的ajax页面上:

<?php
include_once ("../includes/mysql.php");
include_once ("../includes/chk.php");
?>


                          <div class="ui-block-b">
                        <div id="settings_link" data-theme="a">
                            <div data-role="content" data-theme="a" >   
        <h2>Two</h2>
        <p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>   
        <p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p>  
        <p><a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to page "one"</a></p> 
    </div><!-- /content -->

</div><!-- /page two -->
      <div  id="account" data-theme="a">
    <div data-role="content" data-theme="a">    
          <form url="">
                            <div data-role="fieldcontain">
                                <fieldset data-role="controlgroup">
                                    <label for="textinput1">
                                        Boh
                                    </label>
                                    <input id="textinput1" placeholder="" value="" type="text" />
                                </fieldset>
                            </div>
                            <div data-role="fieldcontain">
                                <label for="selectmenu1">
                                    Choose:
                                </label>
                                <select name="selectmenu1" id="selectmenu1">
                                    <option value="option1">
                                        Option 1
                                    </option>
                                </select>
                            </div>
                            <div data-role="fieldcontain">
                                <fieldset data-role="controlgroup" data-type="vertical">
                                    <legend>
                                        Choose:
                                    </legend>
                                    <input name="radiobuttons1" id="radio1" value="" type="radio" />
                                    <label for="radio1">
                                        Option
                                    </label>
                                </fieldset>
                            </div>
                            <div data-role="fieldcontain">
                                <fieldset data-role="controlgroup" data-type="vertical">
                                    <legend>
                                        Choose:
                                    </legend>
                                    <input name="checkbox1" id="checkbox1" type="checkbox" />
                                    <label for="checkbox1">
                                        Checkbox
                                    </label>
                                </fieldset>
                            </div>
                            <input type="submit" value="Submit" />
                        </form>
    </div><!-- /content -->

</div><!-- /page two -->

                    </div>

如果有人能帮我,我将是最棒的完整

您应该使用on而不是bind:

$(document).ready(function() {
    $('#account_link').on('click', function() {...})
    $('#settings_link').on('click', function() {...})
});

您需要在加载的内容中有一个jquery脚本代码。因此,基本页面中必须有相同的内容,并且$.post 调用的代码中也必须包含相同的内容

$.默认$(document).ready(function() 不提供已发布的内容