Chrome 拡張機能開発 Jquery で DOM 操作し挿入したタグが click() できない！
今回は完全に自身でも納得行かず、知識不足による問題無気がしてならないのですが、
唸ってた問題が、一つの切り替えでさくっと解決してしまったので、
どなたかの役に立てればと思ったのと、ハイレベルな方にもしかしたら
助言をいただけるかもしれない？という甘い考えもありつつ投稿させていただきます。
目的
DOMに以下のようなリンクが複数あり、全て同じcloseというクラス名なので、
それらを全て読み込み終了段階で、自動クリックし、onclickのjsを実行させたい。
<!-- この要素たちを自動クリックしたい -->
<a id="originID1" class="close" href="javascript:void(0);" onclick="closeRegion('originID1');">エリア1 閉じる</a>
<a id="originID2" class="close" href="javascript:void(0);" onclick="closeRegion('originID2');">エリア2 閉じる</a>
<a id="originID3" class="close" href="javascript:void(0);" onclick="closeRegion('originID3');">エリア3 閉じる</a>
<a id="originID4" class="close" href="javascript:void(0);" onclick="closeRegion('originID4');">エリア4 閉じる</a>
試行錯誤
コンソールで $('.close').click();とコマンドを打ち込むときちんとクリックされるのに、
いざ拡張機能に組み込むと、なぜかクリックしてくれない・・・・苦戦しました。
ダメだったこと
-
setTimeoutで実行を遅らせる → かなり遅くしても不可 - 一個一個、個別でid指定して、クリックのコードを書いても不可
解決のきっかけ
以下のコードで、全.closeのonclickの値を集め、
別目的用として、拡張機能のJqueryで挿入していたa要素に、
onclickとしと組み込んでみると・・・ちゃんとクリックされて、
思い通りに実行された！・・・・が、しかし
<!-- jqueryで挿入していた、タグ -->
<a href="javascript:void(0);"><div class="cogTab"><i class="fa fa-cogs"></i></div></a>
var onclickValues;
$('.close').each(function(i, e){
onclickValues += $(e).attr('onclick');
});
// a にクラス名を指定していなかったため、子要素から親の a を辿って設定。
$('div.cogTab').parent().attr('onclick', onclickValues);
$('div.cogTab').click(); // 実行できた！
きちんと作りなおし
以下のように、別に専用の要素を作って 同様にjqueryで挿入、
click()させようとすると再びできない。
手動でクリックすると、やはり実行される。
var onclickValues;
$('.close').each(function(i, e){
onclickValues += $(e).attr('onclick');
});
// a タグを新たに作成し、それにかき集めた、関数を`onclick`設定
$('body').append('<a class="allCloser" href="javascript:void(0);"><div class="allCloserDiv">閉じる</div></a>' );
var linkTag = $('a.allCloser').attr('onclick', onclickValues);
$('a.allCloser').click(); // 実行できない・・・
// 手動でクリックしたり、デペロッパーツールのコンソールに同様のコード入力すると、実行される
click() 指定する対象の選択に問題があった
いろいろ位置を変えたり、また実行タイミングを遅らせたり、
更に別の要素のclickイベントに$('a.allCloser').click();仕込んでみたりと
わけのわからない方向へ進んでいました。
しかし、別のタグに設定してうまく行った時のことを考えてみると、
同じようにしていないことに気づきました。
// これでうまく行った時は、aタグの中の子要素をクリック対象にしている。
$('div.cogTab').parent().attr('onclick', onclickValues);
$('div.cogTab').click(); // 実行できた！
// この時は子要素ではなく、aタグ自体をクリックしている。
var linkTag = $('a.allCloser').attr('onclick', onclickValues);
$('a.allCloser').click(); // 実行できない・・・
解決
思った通り、以下のように中の要素をクリックするように指定すれば、うまくいきました。
a タグ自体をクリックするのではなく、
リンクに内包した要素を作り、それをクリックすると堅いようです。
var onclickValues;
$('.close').each(function(i, e){
onclickValues += $(e).attr('onclick');
});
// a タグを新たに作成し、かき集めた関数を`onclick`設定
$('body').append('<a class="allCloser" href="javascript:void(0);"><div class="allCloserDiv">閉じる</div></a>' );
var linkTag = $('a.allCloser').attr('onclick', onclickValues);
$('div.allCloserDiv').click(); // 実行できた！！
今回はこれにて
めでたしめでたし
°。。(´-ω-｀)ﾃﾂﾔﾃﾞﾈﾑﾈﾑ
最後に
最後までお読み頂きありがとうございました。
以上、大した内容ではございませんが、かなり時間浪費したので、
備忘録も兼ねて投稿させていただきました。
ご指摘ございましたら、遠慮無く頂けましたら幸いです。