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

Question

我已经阅读了几个与我的问题相关的stackoverflow答案，说当你动态添加一行时，使新行响应事件的最佳方法是有一个$('.class_name').on('click'，function(e){声明而不是$('.class_name').click(function() {

这对我来说是有意义的，所以我试了一下，它仍然不起作用。当我单击插入行中插入的链接时，什么也没有发生。我把代码放在这里的JSFiddle: http://jsfiddle.net/Thread7/osctqotj/

或粘贴在下面。这是我的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;     
}

任何想法?

Answer 1

您应该听document events并比较选择器。不监听选择器的事件

将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');
});

Answer 2

使用委托方法，例如

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