Javascript JQuery动态添加行，单击事件不触发

我已经阅读了几个与我的问题相关的stackoverflow答案，其中指出，当动态添加一行时，使新行响应事件的最佳方法是使用$'.class_name'。单击时，function{声明，而不是$'.class_name'。单击function{

这对我来说是有意义的，所以我尝试了它，但仍然不起作用。当我单击插入行中的插入链接时，什么都没有发生。我将代码放在JSFIDLE中：

或者贴在下面。这是我的HTML

<table>
<tr><td><a href="javascript:void(0);" id="num_1" cnt="1" class="num-link">1</a></td><td>Harry</td></tr>
<tr><td><a href="javascript:void(0);" id="num_2" cnt="2" class="num-link">2</a></td><td>Sally</td></tr>
    <tr><td><a href="javascript:void(0);" id="num_3" cnt="3" class="num-link">3</a></td><td>Wally</td></tr>
</table>
<input type='button' id='add-row' value='Add Row'>
<br/><br/>
<input type='text' id='write-rank' curcnt='0' style='width: 15px;'>

下面是我的javascript：

$('.num-link').on('click',function(e) { 
    var cnt = $(this).attr('cnt');
    $("#write-rank").attr('curcnt', cnt);
    var x = $(this).position();
    $("#write-rank").val('');
    $("#write-rank").css({top: x.top - 4, left: x.left - 5, position:'absolute'});  
    $("#write-rank").show();
    $("#write-rank").focus();
});

$('#add-row').on('click',function(e) { 
    add_row_for_new_user('Pablo');
});

function add_row_for_new_user(new_user_name) {
      var dis = $(".num-link:first");
      var $curRow = $(dis).closest('tr');
      $newRow = get_blank_row(new_user_name);
      $curRow.before($newRow);
    }

function get_blank_row(new_user_name) {
   var ret = '<tr><td><a href="javascript:void(0);" id="num_99" cnt="99" class="num-link">0</a></td><td>'+new_user_name+'</td></tr>';
  return ret;     
}

有什么想法吗？

你应该听听文档事件并比较选择器。 不侦听选择器的事件

将JS更改为：

$(document).on('click','.num-link', function(e) { 
    var cnt = $(this).attr('cnt');
    $("#write-rank").attr('curcnt', cnt);
    var x = $(this).position();
    $("#write-rank").val('');
    $("#write-rank").css({top: x.top - 4, left: x.left - 5, position:'absolute'});  
    $("#write-rank").show();
    $("#write-rank").focus();
});

$(document).on('click', '#add-row' ,function(e) { 
    add_row_for_new_user('Pablo');
});

---

例如，使用委派方法

$('body').on('click', '#add-row',function(e) { 
    add_row_for_new_user('Pablo');
});

仅供参考：它不是$'.class_name'。单击时，函数{应该是$'parentSelector'。单击时，函数{应该是$'parentSelector'。还要确保在创建多个动态元素时不会重复ID