Question

我有一个列出一堆文件的页面。此页面可以通过URL直接访问，也可以通过另一个页面的jax加载到模式对话框中。

如果通过ajax加载文件页面，我想允许用户单击文件名称并在加载文件页面的页面中触发操作。例如，有一个文章编辑页面。此页面包含“附加文件”按钮。当用户单击该按钮时，文件页面将加载到模式对话框中，单击文件名时，文件的ID将插入到文章表单中，并关闭对话框。但是，还有一个带有类似按钮的事件编辑页面，但我想在此页面上略微区别地处理文件名单击事件。

我想根据调用页面略微区别地处理这些点击事件。目前，我正在页面中定义一个包含全局范围的处理函数，其中包含附加文件的表单，然后在单击文件名时在files-page中测试该函数，如果存在则调用。它有效，但感觉有点hacky。对于我不知道的这类事情，是否有某种最佳实践？

我正在使用jquery，如果这样可以让事情变得更容易......

Answer 1

您可以依赖自定义事件来代替依赖全局处理函数作为页面之间的接口：

“致电页面”：

$(document).bind("fileClicked", function(event, fileName) {
    alert(fileName);
});

“通过ajax加载的页面”：

$(".file").click(function() {
    $(document).trigger("fileClicked", [$(this).text()]);
});

Answer 2

您应该查看jQuery Live

为现在和将来与当前选择器匹配的所有元素附加事件的处理程序。

当加载Ajax页面时，它不会像加载主页面那样由DOM处理，因此使用live会将事件附加到所有当前事件发射器以及未来的事件（如动态Ajax内容）

在Ajax模型中

<div>
    ...
    <a href="#" id="ajax_click_event">Add to main page</a>
    ...
</div>

并在您的静态页面（最初加载的那个）中

$("#ajax_click_event").live('click',function(){
    //Work wit the value of the form within the ajax div.
})

从ajax页面触发调用页面上的事件的最佳实践

2 个答案: