Jquery如何在href元素上触发单击事件

时间:2022-08-27 12:08:14

I am trying to trigger click event on hyperlink with jquery like the way below. Hyperlink does not have any id but it does have cssclass

我正在尝试用jquery在超链接上触发点击事件,如下所示。超链接没有任何id,但是它有cssclass

 $(document).ready(function () {  $('.cssbuttongo').trigger('click'); }); 

The function above is not working. This is the hyperlink

上面的函数不起作用。这是超链接

<a href="hyperlinkurl" class="cssbuttongo">hyperlink anchor</a>

Thanks for the answers.

谢谢你的答案。

6 个解决方案

#1


56  

I do not have factual evidence to prove this but I already ran into this issue. It seems that triggering a click() event on an <a> tag doesn't seem to behave the same way you would expect with say, a input button.

我没有事实证据来证明这一点,但我已经遇到了这个问题。在标记上触发单击()事件似乎与您期望的输入按钮的行为方式不一样。

The workaround I employed was to set the location.href property on the window which causes the browser to load the request resource like so:

我采用的方法是设置位置。窗口上的href属性,导致浏览器加载请求资源如下:

$(document).ready(function()
{
      var href = $('.cssbuttongo').attr('href');
      window.location.href = href; //causes the browser to refresh and load the requested url
   });
});

Edit:

编辑:

I would make a js fiddle but the nature of the question intermixed with how jsfiddle uses an iframe to render code makes that a no go.

我会做一个js小提琴,但问题的本质与jsfiddle如何使用iframe来呈现代码是不一样的。

#2


159  

The native DOM method does the right thing:

本地DOM方法做了正确的事情:

$('.cssbuttongo')[0].click();
                  ^
              Important!

This works regardless of whether the href is a URL, a fragment (e.g. #blah) or even a javascript:.

不管href是URL、片段(例如#blah)还是javascript:,它都可以工作。

Note that this calls the DOM click method instead of the jQuery click method (which is very incomplete and completely ignores href).

注意,这调用了DOM click方法,而不是jQuery click方法(它非常不完整,完全忽略了href)。

#3


22  

In addition to romkyns's great answer.. here is some relevant documentation/examples.

除了罗姆人的伟大答案…这里有一些相关的文档/例子。


DOM Elements have a native .click() method.

DOM元素有一个本机.click()方法。

The HTMLElement.click() method simulates a mouse click on an element.

click()方法模拟鼠标单击一个元素。

When click is used, it also fires the element's click event which will bubble up to elements higher up the document tree (or event chain) and fire their click events too. However, bubbling of a click event will not cause an <a> element to initiate navigation as if a real mouse-click had been received. (mdn reference)

当使用单击时,它还会触发元素的单击事件,该事件将冒泡到文档树(或事件链)更高的元素,并触发它们的单击事件。然而,单击事件的冒泡不会导致元素启动导航,就像收到了真正的鼠标单击一样。(mdn引用)

Relevant W3 documentation.

W3相关文档。


A few examples..

几个例子. .

  • You can access a specific DOM element from a jQuery object: (example)

    您可以从jQuery对象(例如)访问特定的DOM元素

    $('a')[0].click();
    
  • You can use the .get() method to retrieve a DOM element from a jQuery object: (example)

    可以使用.get()方法从jQuery对象中检索DOM元素:(示例)

    $('a').get(0).click();
    
  • As expected, you can select the DOM element and call the .click() method. (example)

    如预期的那样,您可以选择DOM元素并调用.click()方法。(例子)

    document.querySelector('a').click();
    

It's worth pointing out that jQuery is not required to trigger a native .click() event.

值得指出的是,jQuery并不需要触发本机的.click()事件。

#4


4  

Triggering a click via JavaScript will not open a hyperlink. This is a security measure built into the browser.

通过JavaScript触发点击不会打开超链接。这是内置在浏览器中的安全措施。

See this question for some workarounds, though.

不过,你可以看看这个问题。

#5


3  

Just want to let you guys know, the accepted answer doesn't always work.

只是想让你们知道,公认的答案并不总是有效。

Here's an example it will fail.

这里有一个失败的例子。

if <href='/list'>

如果< href = ' /列表' >

href = $('css_selector').attr('href')
"/list"
href = document.querySelector('css_selector').href
"http://localhost/list"

or you could append the href you got from jQuery to this

或者你可以把从jQuery得到的href添加到这个函数中

href = document.URL +$('css_selector').attr('href');

or jQuery way

或jQuery的方式

href = $('css_selector').prop('href')

Finally, invoke it to change the browser current page's url

最后,调用它来更改浏览器当前页面的url

window.location.href = href

or pop it out using window.open(url)

或者用windows。open(url)弹出

Here's an example in JSFiddle.

这是JSFiddle的一个例子。

#6


-1  

I was facing a similar issue how to click a button, instead of a link. It did not success in the methods .trigger('click') or [0].click(), and I did not know why. At last, the following was working for me:

我遇到了一个类似的问题,如何点击按钮而不是链接。在方法.trigger(‘click’)或[0].click()中没有成功,我也不知道为什么。最后,以下是对我有用的:

$('#elementid').mousedown();

#1


56  

I do not have factual evidence to prove this but I already ran into this issue. It seems that triggering a click() event on an <a> tag doesn't seem to behave the same way you would expect with say, a input button.

我没有事实证据来证明这一点,但我已经遇到了这个问题。在标记上触发单击()事件似乎与您期望的输入按钮的行为方式不一样。

The workaround I employed was to set the location.href property on the window which causes the browser to load the request resource like so:

我采用的方法是设置位置。窗口上的href属性,导致浏览器加载请求资源如下:

$(document).ready(function()
{
      var href = $('.cssbuttongo').attr('href');
      window.location.href = href; //causes the browser to refresh and load the requested url
   });
});

Edit:

编辑:

I would make a js fiddle but the nature of the question intermixed with how jsfiddle uses an iframe to render code makes that a no go.

我会做一个js小提琴,但问题的本质与jsfiddle如何使用iframe来呈现代码是不一样的。

#2


159  

The native DOM method does the right thing:

本地DOM方法做了正确的事情:

$('.cssbuttongo')[0].click();
                  ^
              Important!

This works regardless of whether the href is a URL, a fragment (e.g. #blah) or even a javascript:.

不管href是URL、片段(例如#blah)还是javascript:,它都可以工作。

Note that this calls the DOM click method instead of the jQuery click method (which is very incomplete and completely ignores href).

注意,这调用了DOM click方法,而不是jQuery click方法(它非常不完整,完全忽略了href)。

#3


22  

In addition to romkyns's great answer.. here is some relevant documentation/examples.

除了罗姆人的伟大答案…这里有一些相关的文档/例子。


DOM Elements have a native .click() method.

DOM元素有一个本机.click()方法。

The HTMLElement.click() method simulates a mouse click on an element.

click()方法模拟鼠标单击一个元素。

When click is used, it also fires the element's click event which will bubble up to elements higher up the document tree (or event chain) and fire their click events too. However, bubbling of a click event will not cause an <a> element to initiate navigation as if a real mouse-click had been received. (mdn reference)

当使用单击时,它还会触发元素的单击事件,该事件将冒泡到文档树(或事件链)更高的元素,并触发它们的单击事件。然而,单击事件的冒泡不会导致元素启动导航,就像收到了真正的鼠标单击一样。(mdn引用)

Relevant W3 documentation.

W3相关文档。


A few examples..

几个例子. .

  • You can access a specific DOM element from a jQuery object: (example)

    您可以从jQuery对象(例如)访问特定的DOM元素

    $('a')[0].click();
    
  • You can use the .get() method to retrieve a DOM element from a jQuery object: (example)

    可以使用.get()方法从jQuery对象中检索DOM元素:(示例)

    $('a').get(0).click();
    
  • As expected, you can select the DOM element and call the .click() method. (example)

    如预期的那样,您可以选择DOM元素并调用.click()方法。(例子)

    document.querySelector('a').click();
    

It's worth pointing out that jQuery is not required to trigger a native .click() event.

值得指出的是,jQuery并不需要触发本机的.click()事件。

#4


4  

Triggering a click via JavaScript will not open a hyperlink. This is a security measure built into the browser.

通过JavaScript触发点击不会打开超链接。这是内置在浏览器中的安全措施。

See this question for some workarounds, though.

不过,你可以看看这个问题。

#5


3  

Just want to let you guys know, the accepted answer doesn't always work.

只是想让你们知道,公认的答案并不总是有效。

Here's an example it will fail.

这里有一个失败的例子。

if <href='/list'>

如果< href = ' /列表' >

href = $('css_selector').attr('href')
"/list"
href = document.querySelector('css_selector').href
"http://localhost/list"

or you could append the href you got from jQuery to this

或者你可以把从jQuery得到的href添加到这个函数中

href = document.URL +$('css_selector').attr('href');

or jQuery way

或jQuery的方式

href = $('css_selector').prop('href')

Finally, invoke it to change the browser current page's url

最后,调用它来更改浏览器当前页面的url

window.location.href = href

or pop it out using window.open(url)

或者用windows。open(url)弹出

Here's an example in JSFiddle.

这是JSFiddle的一个例子。

#6


-1  

I was facing a similar issue how to click a button, instead of a link. It did not success in the methods .trigger('click') or [0].click(), and I did not know why. At last, the following was working for me:

我遇到了一个类似的问题,如何点击按钮而不是链接。在方法.trigger(‘click’)或[0].click()中没有成功,我也不知道为什么。最后,以下是对我有用的:

$('#elementid').mousedown();