jQuery: Clicking on Chrome after DOM is loaded with .on() and .click()

Question

I have a UI page to test where there are is a lot of room for automation. For example there are buttons that might be clicked all at once or sequentially and they perform some action. Therefore I tried automating the clicking with JS and jQuery, starting from Firefox and moving on to chrome (using greecemonkey and tempermonkey).

The transition from these two browsers was not as easy as I first thought as what seems to be not working is the .click(); method on chrome (at least trying to click some buttons from browsers console).

A simpliefied version when run from browsers console (chrome) and firebug (firefox):

$(".div.tab-pane.active").find(".delete-link").click();

On chrome: just prints out an array of matched elements;
On firefox: actually clicks the link;

Running:

$(".div.tab-pane.active").find(".delete-link").text();

Indicates that the elements are targeted correctly.

Questions:

Do I need to attach an event listener with .on() method to the button I try to click? As I tried this code and it still is not working:

function notify() { 
  $(".div.tab-pane.active").find(".delete-link").click();
  alert( "clicked" );
}

$(".div.tab-pane.active").find(".delete-link").on( "click", notify );

or

$(".div.tab-pane.active").find(".delete-link").on("click", function(){
    alert("clicked");
});

$(".div.tab-pane.active").find(".delete-link").click();
// causes a stack overflow

Why does it work with Firefox (both from firebug and greecemonkey) and not in chrome? What is different in those two browsers that makes the working of .click() different?
How to make it work?

It could be due to security concerns chrome is not allowing `click` from console. — Jai, Nov 13 '14 at 06:48
There is no real life scenario where user clicks multiple buttons, not possible usually. You can better encapsulate the functions at method level. — sabithpocker, Nov 13 '14 at 06:54

score 2 · Accepted Answer · edited May 23 '17 at 11:57

You can use .get(index) method to it, which returns the dom node and you can trigger the event bound on it:

$(".div.tab-pane.active").find(".delete-link").get(0).click();

From the docs:

The .get() method grants access to the DOM nodes underlying each jQuery object.

I just want to add that .get(index) returns the DOM elements matched by the jQuery object, so in our case the selector is ".delete-link" so when we bind a click event in the jQuery/js it returns the dom element only, so binding a click event on the dom node you need to get access on with it.

so i say this:
Chrome doesn't allow indirect opening of the file or event bound to the dom node.

Finally something constructive. It works from console - but could you also add a short explanation as to why it does? As it seems strange to me that it works on FF but not chrome. Thanks. — Mindaugas Bernatavičius, Nov 13 '14 at 06:59

jQuery: Clicking on Chrome after DOM is loaded with .on() and .click()

1 Answers1