JQuery's .trigger() kaynak koduna erişemediğim bir öğeyle nasıl kullanılır?

Question

JQuery'nin .trigger() işlevini belirlemeye yardımcı olmak için biraz yardıma ihtiyacım var. Tamamen izinsiz kaynak kodu ile bir web tarayıcı eklentisi ile çalışıyorum. Main.js dosyası, birlikte çalışan binlerce satırlık tek aralıklı kod içeriyor, bu yüzden neredeyse okunamıyor. Bu nedenle, eklenti içindeki herhangi bir fonksiyona doğrudan erişim bir seçenek değildir.

Tarayıcıda eklenti içinde görüntülenen bir düğme gibi davranan bir div tetiklemem gerekiyor. Öğenin kimliğine sahibim, bu yüzden jQuery aracılığıyla erişebiliyorum. Bana göre, bu div ile ilgili herhangi bir işlevin ne işe yaradığını anlamanın en kolay yolu, bu div öğesi üzerinde .trigger("click") kullanmaktır. Ancak, belgelere dayalı ve beni onunla etrafındaki takım, hedef div kurarsanız .trigger("click") sadece çalışmak görünüyor: Bir elemanın üzerinde çalışmaya .trigger("click") almanın bir yolu var mı

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

o gerçekten can Aksi takdirde manipüle etmek?

Answer 1

Aşağıdakileri kullanmayı denediniz mi?

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

Kaynak:

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

Answer 2

yerli DOM kendine ait HTMLElement.click() sizin için daha iyi çalışabilir jQuery'nin sürümü, farklı. İki karşılaştıran Aşağıdaki örnekler (fark kadarıyla söyleyebilirim, nasıl olaylar balonunda esas olan) Bkz: bu da sizin için işe yaramazsa

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

, tüm düşebilir dönüş yolu creating your own MouseEvent ve dispatchEvent ile tetikleme (hiç yok burada jQuery dikkat edin):

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

Bu işe yarayacak mı?

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>