1

我正在开发使用 .load 函数动态加载页面的网站。例如：index.php 包含链接，点击后加载其他页面。其他页面包含 html 和一些 jQuery 代码（插件初始化等）。问题是动态加载后 jQuery 代码不起作用。索引.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 插件不起作用。有任何想法吗？
您的帮助将不胜感激。

4

2 回答 2

1

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

在 AJAX 调用完成和填充完成后，您可以触发 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 上工作。

于 2012-06-14T11:07:12.313 回答
1

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

jQuery.getScript 参考@api.jquery.com

于 2012-06-14T11:08:14.140 回答