模拟对 DOM 中不存在的动态添加的 div 的点击答案

【问题标题】：Simulating a click on a div added dynamically not existing in DOM模拟对 DOM 中不存在的动态添加的 div 的点击
【发布时间】：2018-07-20 09:54:16
【问题描述】：

据我了解，ajax 回调会在我的 html 中添加一个新的 div。我可以看到在 html 中添加了这个元素，但是由于某种原因我无法通过 DOM 访问它。我尝试在 chrome 和 js 小书签 after 中从控制台调用它，该元素已经可见/添加到 html 中。我不确定为什么 DOM 没有接收到它，但我猜这是另一个问题......

这是 div：

<div class="recaptcha-checkbox-checkmark" role="presentation"></div>

我使用下面的内容来获取对它的引用，但 90% 的时间它返回一个 null（有时它实际上返回一个引用，但老实说我不知道/不明白为什么）：

document.querySelector(".recaptcha-checkbox-checkmark");

我一直在查看different ways to bind to this new div，因此我可以在它出现在 html/dom 中后对其执行单击，但我无法将其组合在一起，因为您似乎可以绑定到 click 事件，但您可以'不要绑定到类似shown 的事件：/

所以这是我目前拥有的，但它不起作用（我猜）它基于 click 事件，我实际上并没有点击它？

var host = document.querySelector("head");
if(host){

    var importJquery = function(){
        var jquery = document.createElement('script');
        jquery.setAttribute("src", "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js")
        host.appendChild(jquery);
    }

    importJquery();

    var bindToCaptcha = function(){
        var script = document.createElement("script");
        script.innerHTML = '$(document).on("click", ".recaptcha-checkbox-checkmark", function(e) {alert("clicked: %o",  this);});';
        host.appendChild(script);
    }

    bindToCaptcha();
}

所以为了清楚起见，我想确定这个 div 出现在 html 中的时刻并执行点击它，但由于我缺少对它的引用，所以不能。

我正在考虑每隔一段时间运行一个循环，检查 div 是否存在，但我宁愿远离这种方法（而且我不确定这是否可行，因为 DOM 似乎并不总是返回引用这个 div)。

非常感谢任何帮助。

【问题讨论】：

你能贴出附加.recaptcha-checkbox-checkmark div 的代码吗？
你想做什么（高级），因为这似乎是一种奇怪的方式，不管它是什么
@sklingler93 我会，但我不确定如何找到它：/ 我查看了触发此 div 显示的 onclick 发生的情况，但只有一个没有任何参考的大型 js 文件到recaptcha-checkbox-checkmark 或者我看错地方了。我是新手，所以请原谅我。
@Damon 在 gamdom.com，有一个聊天显示每隔几分钟就会显示一个链接，您必须单击该链接以获取一些免费的东西，我正在尝试自动化它。单击链接后，会弹出一个验证码框，大多数情况下您只需单击该框即可。所以我必须检测链接何时显示，但我无法获取对验证码框的引用来自动点击。

标签： javascript jquery html ajax dom

【解决方案1】：

您可以使用MutationObserver API 来检测何时将子元素添加到父元素：

// Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type == 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

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

示例取自https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#Example_usage

【讨论】：

感谢您的回答，但与此同时，我找到了解决问题的方法；我无法获得参考，因为我正在寻找的元素位于 iframe 中。如果我首先提到它，我觉得这个问题会立即得到回答，但我是新手，所以我不知道。

【解决方案2】：

我无法获得参考，因为我所追求的元素位于 iframe 中。我觉得如果我首先提到 iframe，其他人会立即回答这个问题，但我是新手，所以在我进一步挖掘之前我什至不知道它。

【讨论】：