Question

我有一个托管在云中的网页（因此我无权访问源代码），但可以在页面底部“注入” JS。有一个按钮，按下后将执行以下操作：

使用ajax检索数据
使用已检索的内容创建新的HTML
使用jQuery淡出原始按钮并淡入新内容

我需要在创建的新内容中修改文本。该按钮如下所示：

<div class=" section subform container" id="myId" style=""><div class="subformheader"><h4>Text I want to modify</h4>

创建的div如下：

let buttonNodes = document.getElementsByClassName('section subform container')
buttonNodes[0].addEventListener('change', function(){alert("clicked me!")});

由于我无法访问源代码，因此无法更改fadeIn来包含用于修改文本的回调。

我尝试使用addEventListener（）将按钮单击的事件绑定到事件中：

{{1}}

但是b / c“ addsubForm（）”函数是ajax，我的函数在ajax调用获得结果并创建新函数之前就已执行。

有什么想法吗？

Answer 1

您可以使用变异观察者。（https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver）

Mutation观察者的问题在于他们的设置非常挑剔。例如，即使是相同的完全相同的代码，下面的代码也可以在http://jsfiddle.net/b9sdLzrv/15/这个小提琴中更好地工作-尽管我怀疑这可能是由于环境所致。

基本上，您想要做的是使用突变观察器测试元素节点何时发生了更改。观察者允许进行回调，然后提供一种方法（observe）将其附加到具有允许选项的目标元素上。

总而言之，您的处境is可危。最好与任何可以编辑代码的人联系，或者让他们去做，或者简单地找到一种替代方法。尽管初始设置的味道很差，但是在DOM加载后仍无法触摸代码和/或从脚本更改代码，这在将来会导致很多问题。

var promise1 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 2000, 'Original Change Text');
}).then(msg => {
  document.querySelector("#myId").innerHTML = `<h4>${msg}</h4>`;
});



let observer = new MutationObserver(function(mutation) {
  document.querySelector("#myId").innerHTML = `<h4>immediately change the text on change`;
observer.disconnect();
});
observer.observe(document.querySelector("#myId"), {
  childList: true
});

<div id="container">
  <div class=" section subform container" id="myId" style="">
    <div class="subformheader">
      <h4>Text I want to modify</h4>
    </div>

Javascript修改动态加载的元素中的文本

1 个答案: