【jQuery】input type fileを別要素クリックで開く

Question

表題の通りinput type fileを別要素クリックで開くための実装を考えております。

こちらのページのコードを参考にしたいのですが、
https://yuyauver98.me/input-file-click/

$(".hogehoge").on('click', function(){
  $("input[type='file']").on('click', function(e){  // ①
    e.stopPropagation();
  });
  $("input[type='file']").click(); // ②
  $("input[type='file']").on('change',function(){
    var file = $(this).prop('files')[0];
    if(!($(".filename").length)){
      $(".hogehoge").append('<span class="filename"></span>'); // ③
    }
    $("#file-label").addClass('changed');
    $(".filename").html(file.name);
  });
});

上記ソースのコメントに記載した①、②の動作が同じように見えるのですが、こちらはなぜ①、②どちらかの記載のみだとダメなのでしょうか？

また、③で動的に追加されたクラスfilenameにon()でイベントを設定するにはどうすればよいのでしょうか？

初歩的な質問で申し訳ありませんが、ご回答いただけますと幸いです。

Answer 1

①はclickイベントを設定していて、②はクリックを実行しているので2つで1セット。
③は予め「.filename」にイベントを設定しておくなら

$(document).on('イベント','.filename',function(){ ・・・

Comments

[yambejp]

ちなみにjQueryはチェーンで繋いでいくのが原則

$("input[type='file']").on('click', function(e){
・・・
}).on('change',function(){
・・・
}).trigger('click')

[Jake5]

yambejpさん
早速ご回答いただきありがとうございます。
①でバブリングを防ぐイベントを設定して、②で自動クリックしているのですね。
解決できそうです????‍♂️
確かにチェーンメソッドはjQueryの強みですよね。

こちら本質問と関係ないのですが、.hogehogeの要素をクリックすると$("input[type='file']").on('change',function(){　・・・
内の処理が1回目のクリック→1回実行、2回目のクリック→2回実行とイベントの発火が重複してしまうのですが、こちら何が原因でどうすれば解決できるかご教示いただけますでしょうか？

[yambejp]

あー、たしかにそういうロジックになっていますね
hogehogeのクリックでイベント追加してるのがまずいです

$(".hogehoge").on('click', function(){
$(':file').trigger('click');
});
$(':file').on('click', function(e){
・・・
}).on('change',function(){
・・・
});

[Jake5]

yambejpさん
とてもすっきり書くことができました。"input[type='file']"を':file'と書き換えられるのは知りませんでした！????‍♂️
イベントを設定した中にでイベントを追加する書き方はあまりよろしくないのでしょうか？

[yambejp]

＞ イベントを設定した中にでイベントを追加

今回はそういうロジックとあっていないということです
必要あればそういう使い方もありです

[Jake5]

yambejpさん
わかりました。ありがとうございます！

Answer 2

1、2どっちかで良くない？
1の記述はstopPropagationによってその要素(input[file])のイベントを止める
2の記述はその要素をクリックする
となっています
その記事では何のエラーが出たかは載ってないのでわかりませんが、動作するなら私も1を消して2だけでいいと思います

3の要素にイベントをつけたい
追加した直後にonでイベントをつけると動作するかと思います

if(!($(".filename").length)){
      $(".hogehoge").append('<span class="filename"></span>'); // ③
      $(“.filename”).on(“click”,....//省略
    }

携帯からなのでonイベントのダブルクォーテーションの違いとかはすみません