jQuery triggerメソッドが動かない

Question

他の要素がクリックされると、<input type="file" id="selectimg">がクリックされ、ファイル選択ができるようにしたいのですが、ファイル選択がされません。

$(function() {
        $('#uploadimage').on('click', function() {
          $('#selectimg').trigger('click');
        });
      });

<div id="uploadimage">
            <input type="file" id="selectimg" style="display: none;">
            <div id="uploadimg-text">画像をアップロード</div>
</div>

これで正常に動くと思うのですが、エラーも出ないので動かない原因がわかりません。
解決策をご教授お願いします。

Comments

[m.ts10806]

click ←この一番右の記号は何でしょう？

[ruby_0ct]

ご回答ありがとうございます。解決いたしました。記号は、制御文字でした。見えない環境でやってましたので気づきませんでした。

[m.ts10806]

なるほど。GoogleChromeでは見えて、Firefoxでは見えませんね。テキストエディタも含めて色々な環境で見てみると良さそうです。

Answer 1

Sublime textでみたら、添付の画像のように、「click」の後に変な文字が入っていました。
おそらく制御文字と言われるやつです。
ツールとか設定とかで見えたり見えなかったりです。
動かない原因はここっぽいので、取っておいてください。

また、上記のみだと、JSのエラーが走るはずので、#selectimgを#uploadimageの直後にでも持っていって、親子関係にしないのがいいと思います。

<div id="uploadimage">
  <div id="uploadimg-text">画像をアップロード</div>
</div>
<input type="file" id="selectimg" style="display: none;">

Comments

[ruby_0ct]

動きました。ありがとうございました。
制御文字はどうにかしないと致命的ですね...

Answer 2

もう少し情報がないと何とも言えませんね…
少なくとも私の環境ではclickイベントは動作しました。

それと別件ですが、

$('#uploadimage').on('click', function() {
  $('#selectimg').trigger('click');
});

上記の処理で自分を再帰的に呼び出し続けて無限ループが起きてましたよ。

追記で、
親要素への伝播(バブリング)についてはご自分で調べてみてください。
preventDefault()やstopPropagation()辺りで調べればサンプルもたくさん出てくると思います。

Comments

[ruby_0ct]

バブリングについて大変参考になります。
今回はinputの位置を変更することで対処しましたが、今後バブリングしないよう気をつけたいと思います。
ありがとうございました。