1

Ajax を使用して一連のデータを読み込む Web アプリがあります。そのデータはライトボックスを起動します。ライトボックスが閉じると、最初の ajax を呼び出して元のデータを更新する必要があります。javascript をスコープ内に維持するためにいくつかの問題が発生しています。

index.phpには、子ページのリストを描画する ajax が含まれています。

<!-- Container for the content  -->
<div id="pageListContainer" data-category-id="1"></div>

<script>

// Re-usable function to draw the pages
function drawPageList() {
    var container = '#pageListContainer';
    var categoryId = $(container).data('categoryId');
    $.post('webservice.php', {action: 'drawPageList', categoryId: categoryId}, function(data) {
        $(container).removeClass('loading').html(data);
    });
}

// Now draw the pages
drawPageList();

// Function to open the page links as an iFrame in a lightbox
$('#pageList a').click(function(event) {
    event.preventDefault();
    $.fancybox({
        type : 'iframe',
        padding : 0,
        autoSize: false,
        width: 440,
        height: 440,
        href: this.href + "&lightbox=true",
    });
});

</script>

webservice.phpは次のようなものを返します。

<ul id="pageList">
    <li><a href="page.php?pageId=1">Page One</a></li>
    <li><a href="page.php?pageId=2">Page Two</a></li>
<ul>

上記は、ライトボックスの open 関数が「#pageList a」を対象としており、DOM のその部分が ajax を介して読み込まれるため、失敗します。これを解決するには、$('#pageList a').click() 関数を webservice.php からの ajax 結果に追加しますが、JS を複数の場所に分割すると、他のスコープの問題が発生します。このような JS 関数のグローバル スコープのベスト プラクティスはありますか?

4

1 に答える 1

3

イベント委任を使用します。これにより、動的に読み込まれるのではなく、DOM に残る親要素にイベント ハンドラーをアタッチできます。例えば：

$('#pageListContainer').on( 'click', '#pageList a', function( event ) {
    // ...
});

イベント ハンドラーを'#pagelist a'要素にアタッチする代わりに、'#pageListContainer'親要素にアタッチします。

于 2013-03-15T04:32:36.507 に答える