Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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();とコマンドを打ち込むときちんとクリックされるのに、
いざ拡張機能に組み込むと、なぜかクリックしてくれない・・・・苦戦しました。

ダメだったこと

  1. setTimeoutで実行を遅らせる → かなり遅くしても不可
  2. 一個一個、個別でid指定して、クリックのコードを書いても不可

解決のきっかけ

以下のコードで、全.closeonclickの値を集め、
別目的用として、拡張機能の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(); // 実行できた!!

今回はこれにて
めでたしめでたし
°。。(´-ω-`)テツヤデネムネム

最後に

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

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away