Question

我在view/loadMoreDataWater.php

中有一个javaScript函数

<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() {

但我感到困惑，它对我没用，我不知道我必须在哪个文件中放置这样的代码。

谢谢

Answer 1

您正在阅读event delegation。

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

此代码将向body元素添加一个事件侦听器，侦听click事件并将处理函数附加到任何click事件，该事件从带有{的元素冒出来“id”的{1}}。

想法是而不是拥有something属性，你可以像这样附加一个事件监听器：

ondblclick=

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

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

“那么”，人们可能会想，“为什么在向事物添加一个巨型事件监听器并在事件处理函数中实现一些交换机逻辑时，为许多单个元素添加许多事件监听器？”

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

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

所以，而不是说：

如果单击此单元格

更新它。

可能会有几十甚至几百次，我们说：

如果页面中的任何位置有点击，

检查点击的内容，

如果这是我们想要更新的内容，

使用要更新的单元格触发updateCell函数。

理想情况下，您的每个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 });元素都会获得一个类似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函数在 updateCell()块中，这意味着该功能不适用于新添加的元素，因为它不在全局范围内。

尝试将函数放在全局范围内，方法是在$(document).ready之外定义updateCell()（在此之外的任何其他函数之外）或直接在全局{{1}中引用它像这样的对象：

$(document).ready

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

window

Answer 2

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

当由ajax加载时，javaScript不会运行

2 个答案: