如何在 DOM 之外 select 没有事件的元素？

Question

我需要执行：

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

具有 .btn-toolbar class 的元素不在 DOM 中，因为它们是在 ajax 请求之后添加的。 如何在 DOM 之外 select 个元素？.

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

Answer 1

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

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

如果该元素实际上还不存在，而你只是在说 "invoke this command on any .btn-toolbar as it gets loaded into the page"，那么你需要一个变异观察器。

Answer 2

您可以在 ajax 调用 success/complete 上执行代码，将 class .btn-toolbar 的元素放入 DOM.

$.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'
  });
});

如何在 DOM 之外 select 没有事件的元素？

How to select element outside DOM without event?

javascript

jquery

dom

jquery-selectors