フェードアウトjqueryの

Question

私はjQueryのに新しいですし、私はこのコードの作品を​​作るためにしようとしていますが、決して使用してクリックした後、ボタン：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="add">Add</button> 
 

 
<script> 
 
    $(document).ready(function(){ 
 
     $("button.add").click(function() { 
 
      $(this).after('<div><button class="remove">Remove</button></div>'); 
 
     }); 
 

 
     //Remove items from cart 
 
     $("button.remove").click(function(){ 
 
      $(this).fadeOut(); 
 
     }); 
 

 
    }); 
 
</script>

私は次の行<div><button class="remove">Remove</button></div>を追加してみてください初期コードのadd buttonの後、すべて正常に動作します。 JSコードを使用して新しい削除ボタンを追加するたびに機能しますが、削除することはできません。

私はそれを修正するのを手伝ってください。

Answer 1

イベント委任と呼ばれます。

次のように表示されます。jQueryは、ページ開始時にドキュメントオブジェクトモデル全体を変数またはオブジェクトに読み込みます。 jQuery関数が要素を使用するたびに、その変数またはオブジェクトを検索して要素を探します。しかし、あなたのコードでは、の後に要素が追加されます。変数またはオブジェクトが作成され、jQueryはこの要素を知らないため、jQueryと対話できません。

シンプルなソリューション：

$("#parentDivOrElement").on("click", "button.remove", function(event) { 
    $(this).fadeOut(); 
}); 

これは、基本的にはjQueryの更新後に、現在のDOM内の要素を見つけてみましょう。 #parentDivOrElementを正しいIDまたはクラスに置き換える必要があります。イベントの委任に関する

より： https://learn.jquery.com/events/event-delegation/

Answer 2

用途：

$(body).on('click', 'button.remove', function(){ 
// do something 
});