Simulating a click on a div added dynamically not existing in DOM

Question

As I understand an ajax callback adds a new div to the html on my end. I can see this element added in the html however I can't access it through DOM for some reason. I tried calling it from the console in chrome and a js bookmarklet after the element was already visible/added to the html. I am not sure why the DOM is not picking it up but that's another question I guess...

This is the div:

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

And I used the below to grab a reference to it but 90% of the time it returns a null (occasionally, it actually returns a reference but I honestly don't know /understand why):

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

I have been looking at different ways to bind to this new div so I can execute a click on it after it appears in the html/dom but I am having trouble putting this together as it seems you can bind to a click event but you can't bind to something like a shown event :/

So this is what I currently have but it doesn't work as (I guess) it's based on a click event and I am not actually clicking it?

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();
}

So just to be clear I want to identify the moment this div shows up in the html and execute a click on it but can't since I am missing a reference to it.

I was considering running a loop at an interval checking whether the div existed but I would rather like to stay away from that approach (and also I am not sure this would work because the DOM doesn't always seem to return a reference this div).

Any help greatly appreciated.

Can you post the code that appends the `.recaptcha-checkbox-checkmark` div? — sliptype, Feb 09 '18 at 15:29
what are you trying to do (high level) because this seems like a weird way of doing it, whatever it may be — Damon, Feb 09 '18 at 15:36
@sklingler93 I would but I am not sure how to find it :/ I looked at what happens onclick that triggers this div to show up but there's just a massive js file that doesn't have any reference to `recaptcha-checkbox-checkmark` or perhaps I am looking at a wrong place. I am new to this so please forgive me. — michal krzych, Feb 09 '18 at 15:40
@Damon at gamdom.com, there is a chat that shows a link every few minutes that you have to click to grab some free stuff and I am trying to automate it. After clicking the link a captcha box pops up and most of the time you just have to click in the box and youre done. So I got to detect when the link shows up but then I can't grab a reference to the captcha box to automate the click. — michal krzych, Feb 09 '18 at 15:43

score 1 · Answer 1 · answered Feb 09 '18 at 15:35

You can use the MutationObserver API to detect when a child is added to a parent element:

// 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();

Example taken from https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#Example_usage

Thanks for your answer but in the mean time I've found a solution to my problem; I couldn't get the reference because the element I was looking for was located within an iframe. I feel like this would have been answered instantly have I mentioned it in the first place but I am new to this so I wasn't aware. — michal krzych, Feb 09 '18 at 16:48

score 1 · Accepted Answer · answered Feb 09 '18 at 16:50

I couldn't get the reference because the element I was after was located within an iframe. I feel like this question would have been answered instantly by someone else had I mentioned the iframe in the first place but I am new to this so I wasn't even aware of it until I have done some further digging.

Simulating a click on a div added dynamically not existing in DOM

2 Answers2