on («click») не работает в jquery

Question

Привет, друг в моем коде, я использовал функцию on() для обработки строк таблицы, созданных после загрузки тела. Я просто хотел удалить эти строки, нажав на .delRow, но мой код не работает, я не могу выяснить, что точная проблема плз проверить мою треску ниже или вы можете проверить fiddle here

использовано Jquery Версия

<script src="http://code.jquery.com/jquery-1.10.2.js" language="javascript"></script> 

HTML

<table width="100%" cellspacing="0" cellpadding="0" border="0" id="emailTable"> 
    <tbody> 
     <tr> 
      <td align="center" colspan="2" > 
       <strong>Share this greeting with your friend</strong> 
      </td> 
     </tr> 
     <tr> 
      <td width="417" align="right"> 
       <input type="text" placeholder="Enter Friend's Email ID" class="mail" id="SendMail" name="SendMail"> 
      </td> 
      <td width="156"> <div class="addRow">Add more Recipients</div></td> 
     </tr> 
    </tbody> 
</table> 

SCRIPT

$(document).ready(function(e) {  
    $('.delRow').on("click", function(event) { 
     $(this).parent('tr').remove(); 
    /*alert('hi');*/ 
    }); 
    $('.addRow').click(function(){ 
     $('#emailTable').append("<tr><td align='right'><input type='text' placeholder=\"Enter Friend's Email ID\" class='mail' id='SendMail' name='SendMail'></td><td class='delRow'> <img src='images/Cross.png' alt=' ' ></td></tr>") 
    }) 
}); 

Пожалуйста, помогите мне, ребята

Answer 1

Delegate щелчок событие элемента static parent или к document.

Попробуйте,

$(document).on("click",'.delRow', function(event) { 
     $(this).parent('tr').remove(); 
}); 

Answer 2

Вы должны использовать event delegation как delRow элементы создаются динамически

$('#emailTable').on("click", '.delRow',function (event) { 
    $(this).parent('tr').remove(); 
    /*alert('hi');*/ 
}); 

Демо: Делегация Fiddle