Wie verwendet man JQuery .trigger() mit einem Element, das ich nicht auf den Quellcode zugreifen kann

Question

Ich brauche ein wenig Hilfe herauszufinden, JQuery .trigger() Funktion. Ich arbeite mit einem Webbrowser-Plugin mit absolut undurchdringlichem Quellcode. Die main.js-Datei enthält Tausende von Zeilen mit einfachem Code, die alle zusammen ausgeführt werden, sodass sie praktisch nicht lesbar sind. Daher ist der direkte Zugriff auf alle Funktionen innerhalb des Plugins keine Option.

Ich muss ein div auslösen, das wie eine Schaltfläche funktioniert, die im Browser im Plugin angezeigt wird. Ich habe die ID des Elements, damit ich über jQuery darauf zugreifen kann. Für mich ist der einfachste Weg, dieses div zu aktivieren, egal welche Funktion damit verbunden ist, .trigger("click") für dieses div-Element zu verwenden. Jedoch auf der Grundlage der Dokumentation und ich damit Ausrüstung um, so scheint es .trigger("click") nur funktionieren, wenn Sie das Ziel div mit einem:

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

Gibt es eine Möglichkeit .trigger("click") zu bekommen auf einem Element zu arbeiten, dass ich wirklich kann sonst nicht manipulieren?

Answer 1

Haben Sie Folgendes versucht?

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

Quelle:

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

Answer 2

Die native DOM hat seine eigene HTMLElement.click() unterscheidet sich von jQuery-Version, die für Sie besser arbeiten können. Siehe die nachstehenden Beispiele Vergleich der beiden (die Differenz ist in erster Linie darin, wie Ereignisse Blase, soweit ich das beurteilen kann):

$('.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>

Wenn das nicht für Sie entweder nicht funktioniert, Sie alle fallen könnten Weg zurück zu creating your own MouseEvent und Auslösen mit dispatchEvent (beachten sie keine jQuery hier überhaupt):

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

Ob das funktioniert?

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>