jQuery trigger(“click”)が動かない環境での対処方法 – Aのクリックを「Bがクリックされた」事にする方法
この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。
どうもこんばんは。toshikuraです。今回のtipsは【jQuery trigger(“click”)が動かない環境での対処方法 – AのクリックをBがクリックされた事に How to work jQtrigger in IE】です。使い方によっては少々デンジャラスですが、trigger自体はすごく便利な機能です。こんな便利なtriggerですがIE6,IE7,IE8で動作しません…これは困ります。
解決方法 – How to work jquerytrigger in IE
ここではdocument.createEventやEventTarget.dispatchEventを代わりに使用しています。若干内容は異なりますがMDN Creating and triggering eventsを併せてご参照頂けましたら解りやすいかもしれません。
実装例
例では#btnがクリックされた際に#tgtがクリックされ、要素が追加されていく動作をします。割愛していますがjQueryの読み込みをお忘れなく。
HTML
<a id="btn">click</a>
<a id="tgt">click?</a>
JS
$(function(){
$(‘#btn’).click(function(){
var tgt = document.getElementById(‘tgt’);
var evt = document.createEvent( ‘MouseEvents’ );
evt.initEvent(‘click’,true,true,window,0,0,0,0,0,false,false,false,false,0,null);
tgt.dispatchEvent(evt);
return false;
});
$(‘#tgt’).bind(‘click’,function(){
$(this).append("<p>clicked</p>");
});
});
ちなみにIE7,8あたりを切り捨ててjQueryの【trigger】だけで実装すると以下のようになります。
JQuery
$(function(){
$(‘#btn’).click(function(){
$(‘#tgt’).trigger(‘click’);
});
$(‘#tgt’).bind(‘click’,function(){
$(this).append("<p>clicked</p>");
});
});
以上になります。