Question

我正在开发使用.load函数动态加载页面的网站。例如：index.php包含链接，在单击后加载其他页面。那个其他页面包含html和一些jQuery代码（插件初始化等）。问题是动态加载后jQuery代码不起作用。 Index.php代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>

<script type="text/javascript">
    $(document).ready(function(){
        $(".load-page").click(function(){
            $('.loaded-page-container').load('some_page_url', function(data, status, xhr) {
                alert('page is loaded');
            });
        });     
    });
</script>

</head>

<body>

<a href="#" class="load-page">Load page</a>

<div class="loaded-page-container"></div>

</body>
</html>

加载页面的代码：

<script type="text/javascript" src="autoNumeric-1.7.4.js"></script>

<script type="text/javascript" src="selectmenu/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="selectmenu/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="selectmenu/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="selectmenu/ui/jquery.ui.selectmenu.js"></script>

<script type="text/javascript">
    $('#number').autoNumeric({mDec:0,vMax:'9999999'});  //these statements doesn't work 
    $('#select').selectmenu({
        width: 289
    });     
</script>

<div class="some-content">
    HTML code that appears after current page loading. 
    <input type="text" value="" name="number" id="number" />
    <select id="select">
        <option value="some-val">Some value</option>
    </select>
</div>

因此页面加载，但遗憾的是jQuery插件不起作用。任何想法？
非常感谢您的帮助。

Answer 1

您需要将所有JS代码保留在第一页，而不是第二页。

AJAX通话完成后＆amp;填充完成后，您可以触发javascript。

<!--ALL scripts linked in this page-->
$.ajax({
    url: "some_page_url",
    success: function( data ) {
        <!--LOADING ONLY THE HTMLs-->
        $('.loaded-page-container').html(data);
        alert('page is loaded');
    },
    complete: function( data ) {
        $('#number').autoNumeric({mDec:0,vMax:'9999999'});  
        $('#select').selectmenu({
            width: 289
        }); 
    }
});

此外，您需要检查插件是否可以通过动态生成的html工作。

Answer 2

您可以按照此处所述使用jQuery.getScript()：

jQuery.getScript reference @ api.jquery.com

执行动态加载的jQuery代码

2 个答案: