AJAX 呼叫终止事件

AJAX call killing event

本文关键字：事件 终止 呼叫 AJAX      更新时间：2023-09-26

我在父页面中有一个div，它通过对HTML的AJAX调用填充了HTML和Javascript。

加载的 Javascript 将"change"事件绑定到加载的 HTML 中的元素。

在第一次 AJAX 调用之后，事件始终触发。但是，在后续的 AJAX 调用中，它永远不会这样做。

父

页面本身填充到祖父页面上的div 中。在将子页面填充到父页面的div 之前，父页面通过对 HTML 的不同 AJAX 调用填充到祖父页面的div 中。不确定这是否与我的问题有关。

在绑定事件（使用 .on）之前对对象调用 .off（） 根本没有帮助。

这是元素：

    <select id="groupSelection" name="grouping" style="width:275px;">
        <option value="0" selected>No Grouping - Single Creative Ad Unit</option>
        <option value="1">New Creative Group</option>
        <?php foreach($placementGroups as $placementGroup): ?>
        <option value="<?=$placementGroup->get_id()?>" data-height="<?=$placementGroup->get_height()?>" data-width="<?=$placementGroup->get_width()?>"><?=$placementGroup->get_name()?> - Height: <?=$placementGroup->get_height()?>px x Width: <?=$placementGroup->get_width()?>px</option>
        <?php endforeach;?>
    </select>

下面是绑定事件：

    $('#groupSelection').off().on('change', function() {...});

但是如果我在第二个 AJAX 调用后显式调用 $（'#groupSelection'）.change（） 它会触发。

我需要做什么？谢谢

编辑：

在我的代码中有一个地方，子函数调用 ajax 函数，它不仅重新加载自身，而且重新加载其父级。当我在调用 ajax 函数之前调用 $（'#groupSelection'）.off（） 时，它工作正常。

但是，父级中的某些函数也会重新加载子项。当我在其中一个函数中重新加载子函数之前调用 $（'#groupSelection'）.off（） 时，我仍然遇到同样的问题。

如果 AJAX 调用将元素替换为groupSelection id，则需要重新创建事件处理程序。不需要重新创建事件处理程序的替代格式是：

$('#someElementWhichIsNotReplacedWhichIsAParentOfgroupSelection').on('change', '#groupSelection', someFunc);

唯一似乎有效的是如果我执行 $（'#groupSelection'）.remove（）; 在从父级进行 ajax 调用之前，我必须在进行 AJAX 调用的每个父函数中执行此操作（ajax 调用位于无法修改的库函数中）。这对我来说似乎是一个丑陋的解决方案，想要一个更漂亮的解决方案。

我尝试了一下，因为我意识到每次进行 ajax 调用时 $（"select[id='groupSelection']"）.length 都在递增。有没有一种干净的方法来垃圾收集内存中的所有事件和对象，以便在div 中替换 HTML？这上面写满了内存泄漏。

编辑：

在父div 上调用 .empty（） 不会删除元素。只有在它们中的每一个上显式调用 .remove（） 才能这样做。

相关文章：