Chrome 拡張機能開発 Jquery で DOM 操作し挿入したタグが click() できない！

今回は完全に自身でも納得行かず、知識不足による問題無気がしてならないのですが、
唸ってた問題が、一つの切り替えでさくっと解決してしまったので、

どなたかの役に立てればと思ったのと、ハイレベルな方にもしかしたら
助言をいただけるかもしれない？という甘い考えもありつつ投稿させていただきます。

目的

DOMに以下のようなリンクが複数あり、全て同じcloseというクラス名なので、
それらを全て読み込み終了段階で、自動クリックし、onclickのjsを実行させたい。

target_page.html


<!-- この要素たちを自動クリックしたい -->
<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としと組み込んでみると・・・ちゃんとクリックされて、
思い通りに実行された！・・・・が、しかし

my_extesiont_tag

<!-- jqueryで挿入していた、タグ -->
<a href="javascript:void(0);"><div class="cogTab"><i class="fa fa-cogs"></i></div></a>

main1.js



var onclickValues;
$('.close').each(function(i, e){
  onclickValues += $(e).attr('onclick');
});
// a にクラス名を指定していなかったため、子要素から親の a を辿って設定。
$('div.cogTab').parent().attr('onclick', onclickValues);
$('div.cogTab').click(); // 実行できた！

きちんと作りなおし

以下のように、別に専用の要素を作って同様にjqueryで挿入、
click()させようとすると再びできない。
手動でクリックすると、やはり実行される。

main2.js



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();仕込んでみたりと
わけのわからない方向へ進んでいました。

しかし、別のタグに設定してうまく行った時のことを考えてみると、
同じようにしていないことに気づきました。

mytest.js


// これでうまく行った時は、aタグの中の子要素をクリック対象にしている。
$('div.cogTab').parent().attr('onclick', onclickValues);
$('div.cogTab').click(); // 実行できた！

// この時は子要素ではなく、aタグ自体をクリックしている。
var linkTag = $('a.allCloser').attr('onclick', onclickValues);
$('a.allCloser').click(); // 実行できない・・・

解決

思った通り、以下のように中の要素をクリックするように指定すれば、うまくいきました。

a タグ自体をクリックするのではなく、
リンクに内包した要素を作り、それをクリックすると堅いようです。

main3.js



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(); // 実行できた！！

今回はこれにて
めでたしめでたし
°。。(´-ω-｀)ﾃﾂﾔﾃﾞﾈﾑﾈﾑ

最後に

最後までお読み頂きありがとうございました。

以上、大した内容ではございませんが、かなり時間浪費したので、
備忘録も兼ねて投稿させていただきました。

ご指摘ございましたら、遠慮無く頂けましたら幸いです。