ロード後に作成された要素にJSイベントが添付されない

Question

問題：ボタンに要素を作成してクリックし、新しい要素にクリックイベントを関連付けます。

私はこの問題を何回も経験していますが、私はいつも回避策を見つけるように見えますが、問題の根本には到達しません。

HTML：：

• 標準のjQuery：ここ

  <select> 
      <option>567</option> 
      <option>789</option> 
  </select> 
  
  <input id="Add" value="Add" type="button"> <input id="remove" value="Remove" type="button"> 
  
  <div id="container"> 
      <span class="item">123</span> 
      <br/> 
      <span class="item">456</span> 
      <br/> 
  </div> 
  

  はJavaScript

  $(".item").click(function() { 
      if ($("#container span").hasClass("selected")) { 
       $(".selected").removeClass("selected"); 
      } 
      $(this).addClass("selected"); 
  }); 
  
  
  $("add").click(function() { 
  
      //Finds Selected option from the Select 
  
      var newSpan = document.createElement("SPAN"); 
      newSpan.innerHTML = choice;//Value from Option 
      newSpan.className = "item"; 
      var divList = $("#container"); 
      divList.appendChild(newSpan);//I've tried using Jquery's Add method with no success 
      //Deletes the selected option from the select 
  }) 
  

  私はすでに試したいくつかの方法であるコードは見てくださいクラス "item"を持つ要素をクリックしてください

（ライブの使用を含む
• ）とイベントハンドラ

をクリックしバインドするバインド方法を使用しています#Container上

jQueryの変更イベントは、要素の作成後にインラインのonclickイベントを設定する（）メソッド

に警告： MVCを使用しており、リストボックスから複数の値を取得する際に問題が発生したため、別の選択リストを作成できません。したがって、MVCが実際に結びついている、生成される隠された要素があります。代わりに、この場合は、あなたの標準$.clickの

Answer 1

使用$.on：

$("#container").on("click", ".item", function(){ 
    if ($("#container span").hasClass("selected")) { 
    $(".selected").removeClass("selected"); 
    } 
    $(this).addClass("selected"); 
}); 

あなたは.item要素の間の周り.selectedクラスを移動するようにそれは私には見えます。この場合、私の代わりにこれを行うことを示唆している：

$("#container").on("click", ".item", function(){ 
    $(this) 
    .addClass("selected") 
    .siblings() 
     .removeClass("selected"); 
}); 

はまた、あなたの$("add")の点に注意してください。あなたは「追加」IDを持つ要素にバインドしたい場合$("#add")でなければなりません。このセクションも書き直すことができます：

$("#add").click(function() { 
    $("<span>", { html: $("select").val() }) 
    .addClass("item") 
    .appendTo("#container"); 
});