Функция jQuery.on не работает

Question

Я использую jQuery 1.9.1, и мне нужно выполнить действие для td, которое динамически добавляется. Я пытался использовать функцию jQyuery.on, но мой код не вызывается. Помоги пожалуйста! Вот мой код

HTML

<div>First Name: 
    <input type="text" name="txtFName" id="txtFName" /> 
    <br/>Last Name: 
    <input type="text" name="txtLName" id="txtLName" /> 
    <br/> 
    <input type="button" value="Add User" id="btnAdd" /> 
</div> 
<br/> 
<div>Users 
    <table id="tblusers"> 
     <thead> 
      <tr> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th></th> 
      </tr> 
     </thead> 
     <tbody id="tbUsers"></tbody> 
    </table> 
    <br/> 
    <input type="button" value="Save Users" /> 
</div> 

Javascript

$(document).ready(function() { 
    $('#btnAdd').click(function() { 
     var content = ""; 
     var fName = $('#txtFName').val(); 
     var lName = $('#txtLName').val(); ; 
     content = "<tr><td>" + fName + "</td><td>" + lName + "</td><td class=\"clremove\">Delete</td></tr>"; 
     $('#tbUsers').append(content); 
    }); 

    $('.clremove').on('click', function() { 
     $('#tbUsers tr').remove($(this).closest('tr')); 
    }); 
}); 

Вот мой Fiddler

Answer 1

.clremove не существует, когда вы звоните .on, чтобы ничего не связано. Вы хотите использовать событие делегация:

$("#tbUsers").on('click', '.clremove', function() { 
    $("#tbUsers tr").remove($(this).closest('tr')); 
}); 

Answer 2

с момента clremove добавляется динамически, $('.clremove').on('click'.. событие не огонь (который в то время нет в docuemnt) .. Вы можете использовать на() делегированы событие для это.

$('#tbUsers').on('click','.clremove' function() { 
    $('#tbUsers tr').remove($(this).closest('tr')); 
}); 

вы можете пройти через link, если вы хотите узнать больше о jquery.on и его прямых и делегированных событий.