检测元素何时完成加载新 HTML

Question

我在另一个 js 文件中有一个加载事件，它使用 .on('load') 在单击分页时加载新的 HTML。但是，一旦 html 加载完成，我需要在另一个脚本中发生一些事情。到目前为止，我已经尝试过了，但没有运气。 js-ajax-content-container 是在新 HTML 中加载的元素。 js-ajax-link是分页link我点击发起load事件

$('body').on('click', '.js-ajax-link', function() {
  $('body').on('.js-ajax-content-container', 'ajaxComplete', function() {
    alert("loaded");
  });
});

Answer 1

您可以在一个脚本中触发自定义事件并在另一个脚本中收听它。

顺便说一句，你的论据顺序错误 on()。
首先传递事件名称，然后传递选择器。

$('body').on('click', '.js-ajax-link', function() {
  $('body').on('ajaxComplete','.js-ajax-content-container', function() {
    $(document).trigger('ajaxLinkLoaded');
  });
});

并且在另一个脚本中您可以收听此事件：

$(document).on('ajaxLinkLoaded', function(e){ // do something});

检测元素何时完成加载新 HTML

Detect when an element is done loading new HTML

ajax

jquery

load