如何在没有事件的情况下选择DOM外部的元素？

Posted 2023-05-09

【中文标题】如何在没有事件的情况下选择DOM外部的元素？

【英文标题】：How to select element outside DOM without event?

【发布时间】：2018-12-07 21:12:15

【问题描述】：

我需要执行：

$('.btn-toolbar').toolbar(
    content: '#toolbar-options'
);

.btn-toolbar 类的元素不在 DOM 中，因为它们是在 ajax 请求之后添加的。 如何选择 DOM 之外的元素？.

在其他类似问题中，它通过委托事件解决，但我没有任何事件来管理它，我不需要启用点击它、悬停或任何其他事件。我只想对btn-toolbar的所有元素执行工具栏功能，但是$('.btn-toolbar')此时为空。

【问题讨论】：

如果不在 DOM 中，元素在哪里？稍后会添加到 DOM 中吗？

如果它不在 DOM 中...你不能选择它。如果 DOM 中还没有，则需要事件委托。据我所知，没有其他可能。

使用存储了非 DOM 元素的变量而不是 $('.btn-toolbar')。如果您想访问该元素，则该元素必须存在于某处。

« 我没有任何要管理的事件。» -- 发布更多代码...。我们会为您找到一个 ;)

@marekful 是的，它会在ajax请求之后添加。

【参考方案1】：

您可以在将类 .btn-toolbar 的元素放入 DOM 后执行 ajax 调用成功/完成的代码。

$.ajax(
....
).done(function() 
  // Places/Inserts the .btn-toolbar elements in the page.
  $('.btn-toolbar').toolbar(
    content: '#toolbar-options'
  );
);

如果 ajax 调用是由您无法执行的其他脚本（例如 - 通过其他插件的缩小脚本，或者该脚本来自其他站点）注入您的代码，您仍然可以干扰 ajax 调用并附加您的要运行的代码。 您可以使用jQuery.ajaxSetup() 自定义在您的站点中进行的 ajax 调用。

例如，您可以通过以下方式在 ajax 调用成功完成时运行您的代码：

$( document ).ajaxSuccess(function() 
  $('.btn-toolbar').toolbar(
    content: '#toolbar-options'
  );
);

【参考方案2】：

如果一个元素不在任何元素子树中（即不是任何其他元素的子元素），并且您没有持有对它的引用（也没有任何其他对象引用它），那么它实际上已经消失了，并且受制于垃圾回收。

如果您正在持有对它的引用，则需要使用该引用。如果它是某个其他元素的子元素（无论 那个 元素是否在 DOM 树中），您需要在选择中包含该父元素，这意味着您至少需要一个引用到那个父元素。否则你真的没有其他方法可以达到它。

如果该元素实际上还不存在，而您只是说“在任何.btn-toolbar 加载到页面中时调用此命令”，那么您需要一个突变观察器。