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>

上述失败是因为灯箱打开函数的目标是“#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 回答