Question

我正在加载一些像这样的HTML内容：

$('#scores').load('scores.php #scores');

请注意，我需要定位scores.php的特定部分（因为我正在尝试定位的区域周围有其他文字。

然而，加载函数生成的HTML无法使用JQuery进行定位。

例如，如果#scores html是这样的：

<div class="score">2335</div>

JQuery事件监听器没有拾取：

$('.score').click(function(event){
  /* This doesn't work */
  alert('this alert never fires if the click event listener is an ajax generated item.');
});

Answer 1

在将数据加载到页面后，您可能无法重新激活.click事件。我自己也遇到过这个问题。

我提出的两个解决方案是使用ajax上的成功回调来重新激活click事件（确保它在加载后始终处于活动状态）或使用.on（“click”， function（））相反，因为它总是存在。

编辑：改为直播。习惯的力量。

Answer 2

使用委托活动。像on一样用于新的jQuery版本（1.7 +）。

$('#containerId').on('click','.score', function(event){
  /* This DOES work NOW*/
});

containerId应该是最接近静态元素（在DOM准备就绪时存在。），它包含.score个元素。

如果使用旧版本的jQuery，请选择正确的函数：

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

关于委托活动的

on docs：

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

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

如何在Jquery加载函数中定位Ajax加载元素

2 个答案: