Как использовать JQuery's .trigger() с элементом, у которого у меня нет доступа к исходному коду

Question

Мне нужна небольшая помощь в определении функции JQuery .trigger(). Я работаю с плагином веб-браузера с совершенно непроницаемым исходным кодом. Файл main.js содержит тысячи строк одноразового кода, которые все работают вместе, поэтому он практически не читается. Поэтому прямой доступ к любым функциям в плагине не является вариантом.

Мне нужно вызвать div, который действует как кнопка, которая отображается в браузере в плагине. У меня есть идентификатор элемента, поэтому я могу получить к нему доступ через jQuery. Для меня, я думаю, что самый простой способ получить этот div для активации любой функции связан с ним - использовать .trigger("click") в этом элементе div. Однако, основываясь на документации, и я оборудуя вокруг с ним, кажется, .trigger("click") работать только если вы создали целевой DIV с:

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

Есть ли способ, чтобы получить .trigger("click") работать на элементе, что я действительно могу иначе не манипулировать?

Answer 1

Вы пробовали использовать следующее?

$('#foo').click(); 

Источник:

• 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/

$(document).ready(function(){ 
 

 

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

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

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

 

 
}) 
 

 

 
});

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

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