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>");
    });
});

以上になります。