jQuery trigger(“click”)が動かない環境での対処方法 – Aのクリックを「Bがクリックされた」事にする方法

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。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.createEventEventTarget.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>");
});
});

以上になります。