jQueryの別の追加要素を介して追加要素にアクセスする方法

Question

私は最大6人（pic1）を1つずつ追加できるフォームを用意しています。

。

「追加」と「+」の両方がユーザーを追加し、フォームを消去します。これにより、HTMLの一部が#worker-containerに追加され、display: noneに隠されます。

コードのHTML部分は次のとおりです。

<div id="team_box_btns"> 
    <div id="team_add_worker_icn"> 
     <span id="team_add_worker"><i class="fas fa-plus-circle fa-2x"></i></span> 
    </div> 
    <p class="form-text-header"><span id="team_add_worker_btn" title="add employee">ADD</span> MAX OF 6 USERS </p> 
</div> 
<div id="worker-container"> 
    <div id="team_worker" class="frame_worker"> 
     <div class="row"> 
      <div class="col-md-6"> 
       <label for="team_name" class="form-text-header">Name</label> 
       <input id="team_name" name="team_name" type="text" class="form-control name" placeholder="" required> 
      </div> 
      <div class="col-md-6"> 
       <label for="team_s_name" class="form-text-header">Surname</label> 
       <input id="team_s_name" name="team_s_name" type="text" class="form-control s_name" placeholder="" required> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-6"> 
       <label for="team_tel" class="form-text-header">Phone</label> 
       <input id="team_tel" name="team_tel" type="tel" class="form-control team" placeholder="" required> 
      </div> 
      <div class="col-md-6"> 
       <label for="team_mail" class="form-text-header">Email</label> 
       <input id="team_mail" name="team_mail" type="mail" class="form-control mail" placeholder="" required> 
      </div> 
     </div> 
    </div> 
</div> 

ここでJS/jQの部分です：

var addWorker = $('here goes the HTML from above').appendTo($('#worker-container')); 
var addWorkerIcn = $('<span id="worker_' + worker_num + '_data"><i class="fa fa-user-circle fa-2x" aria-hidden="true" title="'+ name.value +' '+ s_name.value + '"></i></span>').appendTo($('#team_add_worker_icn')); 

だから、このようになります付加した後：

私は緑のトップをクリックできるようにしたいです右のユーザアイコンをクリックすると、追加されたユーザの詳細が表示されます。私はそれが動的に追加された要素と関係していることを知っており、jQueryに新しい要素について知らせるためにバブリングを使用する必要があります。私は動的に追加されたaddWorkerIcnとそれを行うことができ、それは警告を表示します。 （ 'クリック'、addWorkerIcn、機能（）{; // 設定表示 警告（ 'クリック'）：addWorker要素 上のブロック}）上の

$（ '体'）。

私の質問は、別の添付要素をクリックした後に、追加されたaddWorker要素を表示するにはどうすればいいですか。アイコンをクリックした後に表示します。私はclickイベントでそれを引き起こすことができますが、それは私が探しているものではありません。

Answer 1

代わりに、新しく作成された要素にイベントを追加すると、単に作成された要素のカスタムクラスを作成し、ページのロード時にこのバインディングを行います

$("body").on('click', '.your-class', function(e){ 
    var $el = $(this); 
}) 

あなたはクリックを追加する必要はありません。この方法毎回のイベントをボディに返す代わりに、の要素がbodyタグ内でクリックされると、1つのイベントが発生します。