jQuery：触发 click() 不起作用？

Question

为什么点击trigger1和trigger2不会触发点击open？

<a id="trigger1" href="#" onclick="jQuery('#open').trigger('click');">trigger1</a>  
<a id="trigger2" href="#" onclick="jQuery('#open').click();">trigger2</a>
<a id="open" href="http://google.com">open</a>

使用ready (trigger3) 也不起作用：

<a id="trigger3" href="#">trigger3</a>

...

jQuery(document).ready(function(){    
  jQuery('#trigger3').bind('click', function(){
      jQuery('#open').html('to be fired'); /* works */
      jQuery('#open').click();        
  });

  jQuery('#trigger3').click(function(){
      jQuery('#open').html('to be fired'); /* works */
      jQuery('#open').click();
  });
});

Answer 1

需要澄清的是，jQuery('#open').click() 不会执行锚标记的 href 属性，因此您不会被重定向。它为未定义的#open 执行onclick 事件。

您可以通过给#open 一个点击事件来完成重定向以及使用原始jQuery('#open').click() 代码实现重定向的能力：

jQuery('#open').click( function (e) {
  window.location.href = this.href;
});

Answer 2

从您的代码看起来，您希望当用户点击链接一或二时（触发器 1 或 2）您希望 open 中的链接被关注？

如果是这样的话，.click() 实际上并不是你想要的功能，事实上 jQuery 似乎没有提供直接点击锚元素的方法。它将触发任何附加到元素的事件。

看看这个例子：

<a id="trigger" href="#" onclick="$('#open').click();">trigger</a>
<a id="open" href="http://google.com">open</a>

jQuery:

$('#open').click(function(){
    alert('I just got clicked!'); 
});

Try it here

因此，ID 为 open 的元素附加了一个事件，它只是提醒说它已被点击。单击触发器链接只会触发 ID 为 open 的元素上的单击事件。所以它不会做你想做的事！ 它会触发任何事件，但实际上不会跟随链接
我删除了第二个触发器，因为 .click() 只是 .trigger('click') 的代理，所以他们做同样的事情！

因此，要触发对锚点的实际点击，您需要做更多的工作。为了使它更易于重用，我会稍微更改您的 HTML （稍后我会解释原因）：

<a href="#" class="trigger" rel="#open">trigger google</a>
<a id="open" href="http://google.com">google</a>
<br/><br/>
<a href="#" class="trigger" rel="#bing">trigger bing</a>
<a id="bing" href="http://bing.com">bing</a>

jQuery （最短）：

$('.trigger').click(function(e){
    e.preventDefault();
    window.location = $($(this).attr('rel')).attr('href');
});

Try it here

或者：

$('.trigger').click(function(e){
    e.preventDefault();
    var obj = $(this).attr('rel');
    var link = $(obj).attr('href');
    window.location = link;
});

Try it here

基本上，您想要跟随另一个元素的任何链接都添加class="trigger"，这样它就可以重复使用。在您添加了class 的元素中，添加rel="#element-to-be-clicked" 这将允许您在不同的链接上设置多次点击。

• 因此，您现在使用class="trigger" 捕获对元素的任何点击
• 找到你想被点击的元素rel="#element-to-be-clicked"
• 从元素中获取href地址
• 将窗口位置更改为新链接

Answer 3

尝试删除onclick="jQuery('#open').click();"

也尝试把$('#trigger1')你正在使用jQuery('#trigger3')

开启JSFIDDLE here。

Answer 4

您将事件click 绑定到#trigger3 两次。删除其中一个

Answer 5

试试这个：

jQuery(document).ready(function(){    
  jQuery('#trigger3').bind('click', function(){
      jQuery('#open').text('to be fired'); /* works */
      jQuery('#open').click();        
  });

  jQuery('#trigger3').click(function(){
      jQuery('#open').text('to be fired'); /* works */
      jQuery('#open').click();
  });
});

jQuery('#open').html('被解雇');将更改为只是一个文本。这就是第二次选择不起作用的原因。

Answer 6

根据href 的内容，有 3 种类型的链接：

1) href 是一个网址
2) href 是一个 javascript 调用，例如 "javascript:"
3）href没用("#", "javascript:void(0)", ...)，函数直接绑定在链接上

这就是我制作这个小插件来调用好方法的原因：

(function( $ ){
  $.fn.triggerClick = function() {
      var href = $(this).attr('href');
      //No useful link into href, try to call js click
      if(href.indexOf('#') == 0 || href.indexOf('javascript:void(') == 0 || href == '') {
         $(this).click();
      //JS call
      } else if(href.indexOf('javascript:') == 0) {
         eval(href);
      //URL
      } else {
         document.location.href = href;
      }
    };
  })( jQuery );

要调用它，只需使用$('DOMelement').triggerClick()。
希望这会有所帮助。 （这个插件是一个原型。如果有错误，谢谢告诉我......）