ソースコードにアクセスできない要素でJQueryの.trigger（）を使用する方法

Question

JQueryの.trigger()機能を理解するのに少し助けが必要です。私はまったく不可能なソースコードでWebブラウザプラグインを使って作業しています。 main.jsファイルには、すべてが一緒に実行される何千もの行間の1行のコードが含まれているため、ほとんど判読できません。したがって、プラグイン内の関数に直接アクセスすることは選択肢ではありません。

プラグイン内のブラウザに表示されるボタンのように機能するdivをトリガーする必要があります。私は要素のIDを持っているので、jQuery経由でアクセスすることができます。私には、そのdivに関連する機能を起動させる最も簡単な方法は、そのdiv要素に.trigger("click")を使用することです。しかし、ドキュメンテーションに基づいており、私はそれを周りツーリング、あなたがターゲットのdivを設定した場合.trigger("click")のみ動作ようだ：要素上で動作するように.trigger("click")を取得する方法はあります

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

その私は本当にすることができますそうでなければ操作しますか？

Answer 1

次の方法で試しましたか？

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

出典：

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

Answer 2

ネイティブDOMが持つ独自のHTMLElement.click()あなたのために良い仕事かもしれjQueryのバージョンとは異なり。 （違いは私の知る限り、どのようなイベントバブルで主にある）2を比較し、以下の例を参照してください。

$('.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にして（ここでは全くのjQueryを注意していない）dispatchEventでそれをトリガー：

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>