javaScript在被ajax加载时不能运行

javaScript doesn't run when loaded by ajax

本文关键字：不能 运行 加载 在被 ajax javaScript      更新时间：2023-09-26

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

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

现在在table.php在public_html文件夹我有一个表时，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() {

但是我很困惑，它不适合我，我不知道我必须在哪个文件中放置这样的代码。

谢谢

您正在阅读有关事件委托的内容。

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

此代码将向body元素添加一个事件侦听器，侦听click事件，并将处理程序函数附加到从id为' something '的元素中冒出的任何click事件。

这个想法是而不是有一个ondblclick=属性，你附加一个事件监听器，像这样: 
$('body').on('dblclick', 'td', function() {
  // do whatever updateCell() does, using `$(this)` for the td that was clicked
});
因此，实际上您是在将事件处理程序委托给一个元素。这很有用，有几个原因，其中最主要的原因是，当您删除内容时，body元素不会去任何地方，当添加到DOM中时，事件处理程序也不需要附加到新元素。

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

"所以"，有人可能会问，"当你可以在主体中添加一个巨大的事件侦听器并在事件处理程序函数中实现一些交换机逻辑时，为什么要向许多单独的元素添加许多事件侦听器呢?"

如果没有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")，然后您可以将其中任何一个用作委托事件处理程序的选择器。这将代替使用' 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
}

显然，如果你选择使用事件委托，你将不再需要那些ondblclick=属性，所以删除它们，只使用<td class="dblclick-update"></td>或类似的东西。

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

试着把函数放在全局作用域中，要么在$(document).ready之外定义updateCell()(以及在任何其他函数之外)，要么在全局window对象中直接引用它，像这样:

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

或者，如果使用事件委托，

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

感谢您的贡献。问题出在新嵌入元素的id中，因为它包含一个变量，而这个变量导致了id的重复。现在工作得很好。由于@amdouglas

相关文章：