javascript - jQuery:在使用 .on() 和 .click() 加载 DOM 后单击 Chrome

Question

我有一个 UI 页面来测试哪里有很大的自动化空间。例如，有些按钮可能会被一次性或连续点击，它们会执行某些操作。因此，我尝试使用 JS 和 jQuery 自动点击，从 Firefox 开始，然后转向 chrome(使用 greecemonkey 和 tempermonkey)。

从这两种浏览器进行转换并不像我最初想象的那么容易，因为似乎不起作用的是 .click(); chrome 上的方法(至少尝试从浏览器控制台单击一些按钮)。

从浏览器控制台 (chrome) 和 firebug (firefox) 运行时的简化版本:

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

• 在 chrome 上:只打印出匹配元素的数组；
• 在 firefox 上:实际点击链接；

运行:

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

表示元素被正确定位。

问题:

我是否需要将带有 .on() 方法的事件监听器附加到我尝试单击的按钮？当我尝试这段代码时，它仍然无法正常工作:

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

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

或

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

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

• 为什么它适用于 Firefox(来自 firebug 和 greecemonkey)而不适用于 chrome？这两种浏览器有何不同，使 .click() 的工作方式不同？

• 如何让它发挥作用？

Answer 1

你可以使用 .get(index) 方法，它返回 dom 节点，你可以触发绑定(bind)在它上面的事件:

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

来自文档:

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

我只想添加 .get(index) 返回与 jQuery 对象匹配的 DOM 元素，所以在我们的例子中选择器是 ".delete-link" 所以当我们在 jQuery/js 中绑定(bind)一个点击事件时，它只返回 dom 元素，所以在 dom 节点上绑定(bind)一个点击事件你需要访问它。

所以我这样说:
Chrome 不允许间接打开绑定(bind)到 dom 节点的文件或事件。

• > This link could help.
• > and this too.