基于动态生成的DOM元素运行脚本

我正在使用第三方产品。它使用页面上的JavaScript（非JQuery）代码实时生成DOM元素。基于动态生成的DOM元素运行脚本

只要此第三方代码生成与给定选择器匹配的DOM元素，是否可以运行jQuery脚本？

以另一种方式解释，我不想尝试与该代码集成。我只想监视某些要创建的元素，这是运行我自己的自定义jQuery的提示。

来源

2009-10-08 Alex Angas

除非是Reinis提到DOM突变事件，我能想到的三个选项：

1）如果你想简单地拥有事件处理上的新元素，你可以使用jQuery Live

2）你可以使用setTimeout来定期检查DOM中的新元素。

3）如果你觉得就像跳进第三方代码（理解，不直接修改），然后你可以提供一个通知您，明确的，当它们的功能执行

var oldFunc = thirdParty.theirFunc; 
thirdParty.theirFunc = function(){ 
    oldFunc(); 

    // alert myself of the change. 
    myDomChangedFunction(); 
};

此功能覆盖这样你实际上并没有直接修改其源，只是在功能上:)

来源

2009-10-08 15:25:24 Matt

3号是我认为我会尝试 - 谢谢！ – 2009-10-08 15:32:32

@Matt - 'onload（）'不起作用吗？ – Anthony 2009-10-08 19:48:18

@Anthony - 我真的不知道:)。我从来没有见过你在load（）解决方案中提出的建议。你是否建议每次浏览器完成加载元素时触发onload（）？（比如初始页面加载，或者当它通过AJAX调用完成将新元素加载到DOM中时） – Matt 2009-10-08 20:10:17

还有所谓的DOM mutation events。不过，我不确定他们在浏览器上的支持情况如何，不过我还没有机会使用它们。他们甚至没有列入ppk's compatibility tables。

来源

2009-10-08 15:14:08 slikts

DOM突变事件会真棒，一旦它被实现，但可悲的是，它不支持Opera，我E或FF2。 – Mottie 2009-10-09 01:46:46

基于jquery文档，听起来像load()可以用于任何元素，而不仅仅是窗口/文档类型元素。所以如果你知道元素是什么（id，类），你可以让jquery绑定到这些选择器上，并且做你需要做的事情。

来源

2009-10-08 15:21:20 Anthony

根据您需要支持的浏览器，您可以使用Reinis提到的DOM突变事件。

下面是测试你的目标浏览器（S）的在线资源：如果这些事件不会在你的目标浏览器支持

，我能想到的唯一选择是轮询任何节点的内容会包含新的元素。

来源

2009-10-08 15:24:03 jhurshman

IE和Firefox。看起来不像IE（版本8）的作品。 – 2009-10-08 15:26:36

退房jQuery的“直播”事件绑定，它可能会帮助： http://docs.jquery.com/Events/live

在jQuery 1.3中添加：为所有当前和将来匹配的元素绑定事件处理程序（如点击）。也可以绑定自定义事件。

来源

2009-10-08 15:39:23

如果一个AJAX调用已经改变了你的DOM，你要使用jQuery，看看

.ajaxComplete()

来源：http://api.jquery.com/ajaxcomplete/ 监听上任何 AJAX调用。

或处理真正的DOM树中的任何改变，使用

MutationObserver

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

// select the target node 
    var target = document.getElementById('some-id'); 

    // create an observer instance 
    var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
     console.log(mutation.type); 
    });  
    }); 

    // configuration of the observer: 
    var config = { attributes: true, childList: true, characterData: true }; 

    // pass in the target node, as well as the observer options 
    observer.observe(target, config); 

    // later, you can stop observing 
    observer.disconnect();

多由Mozilla开发者：

https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/

来源

2017-11-19 14:17:21 simUser

基于动态生成的DOM元素运行脚本

回答

相关问题