Question

我有一个网页应用程序，它使用ajax加载一组数据，数据启动灯箱，当灯箱关闭时，我需要通过调用初始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函数的全局范围是否有最佳实践？

Answer 1

使用事件委派。这允许您将事件处理程序附加到保留在DOM中而不是动态加载的父元素。例如：

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

不是尝试将事件处理程序附加到'#pagelist a'元素，而是将其附加到'#pageListContainer'父元素。

保持Javascript在范围内

1 个答案: