Question

我有一个js文件，为包含弹出对话框功能的所有页面加载：

$(document).ready(function() {

    $('a.popup').on('click', function(e) {
        alert('Show Dialog');
    });
});

首次加载页面时，此功能正常。但是，当使用：

对象元素进行使用时

$(this).html(data);

似乎a.popup事件已不再附加。此问题仅发生在IE7 +中。它适用于chrome，firefox和opera。任何人都知道可能导致问题的原因和解决方法吗？

Answer 1

而不是：

$('a.popup').on('click', function(e) {
    alert('Show Dialog');
});

使用：

$('body').on('click', 'a.popup', function(e) {
    alert('Show Dialog');
});

另请参阅：http://api.jquery.com/on/

Answer 2

来自jQuery API：

事件处理程序仅绑定到当前选定的元素;他们   在您的代码调用.on（）时页面上必须存在。   要确保元素存在且可以选择，请执行事件   绑定在文档就绪处理程序中的元素   页面上的HTML标记。 如果要将新HTML注入   页面，选择元素并在新HTML后附加事件处理程序   被放入页面。或者，使用委派事件来附加事件   处理程序，如下所述。

委派事件的优势在于它们可以处理来自的事件   稍后添加到文档中的后代元素。通过   选择一个保证在当时存在的元素   委托事件处理程序附加，您可以使用委托事件   避免频繁附加和删除事件处理程序的需要。这个   element可以是a中视图的容器元素   例如，模型 - 视图 - 控制器设计，或者如果事件是文档   handler希望监视文档中的所有冒泡事件。该   文档元素在之前的文档头部中可用   加载任何其他HTML，因此可以安全地在那里附加事件   等待文件准备好。

除了能够处理后代元素的事件外   尚未创建，委托事件的另一个优势是他们的   当许多元素必须存在时，开销要低得多   监控。在此示例中，在其tbody中包含1,000行的数据表中   将处理程序附加到1,000个元素：

$("#dataTable tbody tr").on("click", function(event){
    alert($(this).text());
});

委托事件方法仅将事件处理程序附加到一个元素，tbody和事件只需要升级一个级别（从点击的tr到tbody）：

$("#dataTable tbody").on("click", "tr", function(event){
    alert($(this).text());
});

Answer 3

尝试使用live函数进行事件绑定

请参阅http://api.jquery.com/live/

在IE7 +中部分重新加载后未附加Javascript事件

3 个答案: