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).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'); });并比较选择器。不要听选择器的事件。

将JS更改为：

{{1}}

Answer 2

使用委托方法，例如

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

JQuery动态添加了row，click事件没有触发

2 个答案: