由 ajax 加载时 javaScript 不运行

Question

我在view/loadMoreDataWater.php中有一个javaScript函数

<td ondblclick="updateCell()">
</td>

现在，在 public_html 文件夹中的 table.php 中，当 onscroll 应该加载更多数据时，我有一个表:

qlimit =0;    
$("#waterDBTable tbody").scroll(function() {

    if ($("#waterDBTable").scrollTop() > $("#waterDBTable").height() - 300) {
         qlimit = qlimit + 5; 
         $("#loadingDiv").css('display','block');
         $.ajax({
            url: "controllers/loadMoreDataWater.php?qlimit=" + qlimit + "&table=water",
            success: function(result) {
               $("#waterDBTable").append(result);
               $("#loadingDiv").css('display','none');
            }
        });
    } 

});

现在当内容通过ajax加载时。 ondblclick 功能不起作用。我发现了一些关于使用

$(body).on('click', '#something', function() {

但我很困惑，它对我不起作用，我不知道必须将这样的代码放在哪个文件中。

谢谢

Answer 1

您正在阅读有关 event delegation 的内容.

$('body').on('click', '#something', function() { 
  // do stuff
});

此代码会将事件监听器添加到 body元素，监听 click事件并将处理函数附加到任何 click从带有 id 的元素中冒出的事件'something '.

这个想法而不是拥有 ondblclick=属性，您可以像这样附加一个事件监听器:

$('body').on('dblclick', 'td', function() {
  // do whatever updateCell() does, using `$(this)` for the td that was clicked
});

因此，实际上您将事件处理程序委托(delegate)给一个元素。这很有用，有几个原因，其中最主要的是，当您删除内容时，body 元素不会移动到任何地方，并且在添加到 DOM 时也不需要将事件处理程序附加到新元素。

要了解其工作原理，请对其进行逆向工程。想象一下这实际上在做什么:所有事件都从其来源冒泡到顶级节点。这意味着每个点击事件都会注册为对事件目标(您要添加事件处理程序的元素)和 body 元素的点击，因为您在单击该元素时也单击了 body。

“那么，”人们可能会想，“当您只需向主体添加一个巨大的事件监听器并在事件处理函数中实现一些总机逻辑时，为什么要向许多单独的元素添加许多事件监听器呢？”

没有 jQuery，你可以像这样做一个基本的事件调度程序:

document.body.addEventListener('dblclick', function(){
  var el = this;
  if ( el.classList.contains('dblclick-to-update') ){
    updateCell(el);
  }

  // other if statements could be below, handling other dblclick events, on elements other than td cells, if necessary
});

所以，不要说:

• 如果单击此单元格
  • 更新它。

可能有数十次甚至数百次，我们说:

• 如果点击页面中的任意位置，
  • 检查点击的内容，
    • 如果我们想要更新某些内容，
      • 使用要更新的单元格触发 updateCell 函数。

理想情况下，您的每个td元素将被赋予一个 CSS 类，如 class="dblclick-update"或像 data-dblclickupdate="true" 这样的数据属性，然后您可以将其中任何一个用作委托(delegate)事件处理程序的选择器。这将代替使用 ' td ' 作为选择器，如果你有其他 td ，这会搞砸。不需要 updateCell() 的元素依附于他们的行为。

所以你的代码可能如下所示:

$('body').on('dblclick', '.dblclick-update', function(){
  updateCell($(this));
});

使用updateCell($(this))会给你td已单击，但您需要更改 updateCell()函数来处理作为参数传入的元素。在你的函数定义中，你首先需要声明该函数需要一个参数，所以你可能有这个:

function updateCell() {
 // do stuff to 'this'
}

您需要像这样定义函数:

function updateCell(cell) {
  // do stuff to 'cell', which is passed in as a parameter now
}

显然，如果您选择使用事件委托(delegate)，则不需要那些 ondblclick=属性不再存在，因此删除这些属性并只具有 <td class="dblclick-update"></td>或类似的东西。

至于为什么ondblclick="updateCell()"不适用于新添加的 td元素，我的猜测是您定义了 updateCell() $(document).ready内函数block，这意味着该函数不可用于新添加的元素，因为它不在全局范围内。

尝试通过定义 updateCell() 将该函数放入全局范围内$(document).ready 之外(以及与此相关的任何其他函数之外)或直接在全局 window 中引用它像这样的对象:

window.updateCell = function(){ 
  // do stuff to cell
};

或者，如果您使用事件委托(delegate)，

window.updateCell = function(cell){ 
  // do stuff to cell
};