1

.load 関数を使用してページを動的にロードする Web サイトを開発しています。例: 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 プラグインは機能しません。何か案は？
あなたの助けをいただければ幸いです。

4

2 に答える 2

1

ここで説明されているように使用できますjQuery.getScript()：

jQuery.getScriptリファレンス@api.jquery.com

于 2012-06-14T11:08:14.140 に答える
1

2 ページ目ではなく、最初のページにすべての 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 に答える