如何使用JQuery的.trigger（）和一个我无法访问源代码的元素

Question

我需要帮助搞清楚JQuery的.trigger()功能。我正在使用一个带有完全难以理解的源代码的Web浏览器插件。 main.js文件包含数千行单行间隔代码，这些代码全部一起运行，因此它实际上是不可读的。因此，不能直接访问插件中的任何功能。

我需要触发一个div，就像在插件中的浏览器上显示的按钮一样。我有元素的ID，所以我可以通过jQuery访问它。对我来说，我认为让div触发与之相关的任何函数的最简单方法是在该div元素上使用.trigger("click")。但是，基于文档和我使用它的工具，似乎只有.trigger("click")设置目标div：{/ p>

$( "#foo" ).on( "click", function(){...});

有没有办法让.trigger("click")处理一个我真的无法操纵的元素？

Answer 1

您是否尝试过使用以下内容？

var greetings = {}
greetings.eng = 'e'
greetings.ger = 'a'

var lang = "eng"

"h" + greetings[lang] + "llo" // 'hello'

lang = "ger"

"h" + greetings[lang] + "llo" // 'hallo'

来源：

• https://api.jquery.com/click/

Answer 2

本机DOM有自己的HTMLElement.click()与jQuery的版本不同，它可能更适合你。看下面的例子比较两者（差异主要在于事件如何泡沫，据我所知）：

$('.trigger1a').on("mouseup", function() {
  $('#foo').click();
});
$('.trigger1b').on("mouseup", function() {
  $('#bar').click();
});

$('.trigger2a').on("mouseup", function() {
  document.getElementById('foo').click();
});
$('.trigger2b').on("mouseup", function() {
  document.getElementById('bar').click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="trigger1a">jQuery "click" div</button>
<button class="trigger1b">jQuery "click" input</button>
<br>
<button class="trigger2a">DOM "click" div</button>
<button class="trigger2b">DOM "click" input</button>
<br>

<div class="bubblecatcher" onclick="console.log('event bubbled');">
  <div id="foo" onclick="console.log('div clicked');">Div with click event</div>
  <input id="bar" onclick="console.log('input clicked');" value="input with click event">
</div>

如果这对你不起作用，你可以一直回到creating your own MouseEvent并用dispatchEvent触发它（注意这里没有jQuery）：

function triggerClick() {
  var clickEvent = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  var clickEvent = document.getElementById('foo').dispatchEvent(clickEvent); 
}

<div id="foo" onclick="alert('clicked');">div with click event</div>

<button class="trigger" onclick="triggerClick()">Click this to trigger it</button>

Answer 3

这会有用吗？

https://jsfiddle.net/zkLbwarj/

＆＃13;

＆＃13;

$(document).ready(function(){


$("body").on("click","a.unreachable",function(e){
e.preventDefault();
	$(this).text("Hammer Time!")
});

$("body").on("click",".proxy-button",function(){

$(".unreachable").trigger("click").css({"background-color":"red"});


})


});

＆＃13;

.button {
  display: inline-block;
  background: grey;
  color: white;
  border-radius:10px;
  padding:10px 15px;
  margin: 10px;
}
.proxy-button {
  background: teal;
}

＆＃13;

<a class="button unreachable">Can't Touch This</a> <br>
<a class="button proxy-button">Proxy Button</a>

＆＃13;

＆＃13;

＆＃13;