jqueryでクラスを使用して要素を削除したときにイベントハンドラを継承する方法は？

Question

上記のコードで

<div id="parent_div"> 
     <div class="child_div"> 
      <p>clicked button 1</p> 
      <button id="button1">button1</button> 
     </div> 

     <div class="child_div"> 
      <p>clicked button 2</p> 
      <button id="button2">button2</button> 
     </div> 
    </div> 

    <button id="remover">remove</button> 

    <script type="text/javascript"> 
     $('#button1').click(function(event) { 
      $(this).prev().css('color','red'); 
     }); 

     $('#button2').click(function(event) { 
      $(this).prev().css('color','yellow'); 
     }); 

     var new_html = '<div class="child_div">\ 
          <p>new button 1</p>\ 
          <button id="button1">button1</button>\ 
         </div>\ 
         <div class="child_div">\ 
          <p>new button 2</p>\ 
          <button id="button2">button2</button>\ 
         </div>\ 
         <div class="child_div">\ 
          <p>new button 3</p>\ 
          <button id="button3">button3</button>\ 
         </div>' 

     $('#remover').click(function(event) { 
      $('#parent_div').children().detach(); 
      $('#parent_div').append(new_html); 
     }); 
</script> 

を次のように私は、HTMLを持っているリムーバーボタンがクリックされたときに、私はparent_divが空に行きたいが、私はそれらの上に置くのイベントハンドラを保持する必要があります。後で、私は別のhtmlを追加しますが、前にイベントを配置するのと同じIDを持っています。上記のコードでこれを実行しようとすると、detach（）またはremove（）またはemtpy（）のメソッドに関係なく、イベントが埋められます。新しい要素では、私のクリックイベントは機能していません。この問題を解決するために私を助けてください

Answer 1

このコードを確認してください。

 

 
$().ready(function(){ 
 
     $('#parent_div').on('click', '#button1', function (event) { 
 
      $(this).prev().css('color', 'red'); 
 
     }); 
 
     $('#parent_div').on('click', '#button2', function (event) { 
 
      $(this).prev().css('color', 'yellow'); 
 
     }); 
 
     $('#parent_div').on('click', '#button3', function (event) { 
 
      $(this).prev().css('color', 'green'); 
 
     }); 
 

 
     var new_html = '<div class="child_div">\ 
 
         <p>new button 1</p>\ 
 
         <button id="button1">button1</button>\ 
 
        </div>\ 
 
        <div class="child_div">\ 
 
         <p>new button 2</p>\ 
 
         <button id="button2">button2</button>\ 
 
        </div>\ 
 
        <div class="child_div">\ 
 
         <p>new button 3</p>\ 
 
         <button id="button3">button3</button>\ 
 
        </div>' 
 

 
     $('#remover').click(function (event) { 
 
      $('#parent_div').children().detach(); 
 
      $('#parent_div').append(new_html); 
 
     }); 
 
    });

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<div id="parent_div"> 
 
    <div class="child_div"> 
 
     <p>clicked button 1</p> 
 
     <button id="button1">button1</button> 
 
    </div> 
 

 
    <div class="child_div"> 
 
     <p>clicked button 2</p> 
 
     <button id="button2">button2</button> 
 
    </div> 
 
</div> 
 

 
<button id="remover">remove</button>