如何定位 javascript 呈现的标记

Posted 2023-05-09

【中文标题】如何定位 javascript 呈现的标记

【英文标题】：How to target javascript rendered markup

【发布时间】：2014-05-23 02:03:58

【问题描述】：

我正在努力解决由插件呈现的目标标记。我正在使用这个插件：

http://jellekralt.github.io/Responsive-Tabs/demo/demo.html

您将在此处找到该网站：

kenaesthetic.com

我正在尝试以#infotabs a 选择器为目标，但似乎存在断开连接。该插件采用我的初始标记并重新渲染它。我现在需要定位生成的标记，但似乎无法。这是怎么做到的？

【问题讨论】：

始终包含相关代码和标记（在本例中为 DOM 屏幕截图）在问题中，不要只是链接。链接失效了，人们不应该离开网站来帮助你。

【参考方案1】：

您需要使用事件委托。您可以将侦听器放在动态创建的标记的父级上并等待事件冒泡。

$('.holds-html-generated-by-plugin').on('click', '.generated-by-plugin', function () 
  // this will be '.generated-by-plugin'
  console.log(this);
);

【参考方案2】：

插件的文档应该告诉你关于它如何改变 DOM 你需要知道什么。如果没有，说明文档记录不充分。

如果插件文档不充分，基本方法（如果您想使用它）是将插件应用到您的页面并使用浏览器内置的工具来查看它如何更改 DOM。所有现代浏览器都内置了一组非常有用的工具。查看菜单（或按 F12，这是打开它们的标准按键）。

一旦您知道插件如何更改 DOM，您就可以编写选择器来定位更改。确保在插件应用其更改之后之前不要尝试使用这些选择器，因为它们还不相关。所以要么在插件完成它的事情之前不要使用它们，或者在 delegated 处理程序中使用它们。