我有一个网页应用程序,它使用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函数的全局范围是否有最佳实践?
答案 0 :(得分:3)
使用事件委派。这允许您将事件处理程序附加到保留在DOM中而不是动态加载的父元素。例如:
$('#pageListContainer').on( 'click', '#pageList a', function( event ) {
// ...
});
不是尝试将事件处理程序附加到'#pagelist a'
元素,而是将其附加到'#pageListContainer'
父元素。