Javascript Onclick事件在新添加的行中不起作用

这是我的密码。当我单击添加行时，它将添加下面的行。但是单击事件仅在第一行中起作用

其余几排的人都不行

#
名称
邮寄
可移动的
1.
选择选择器2
添加行删除行
$（文档）.ready（函数（）{
var i=1；
$（“#添加_行”）。单击（函数（）{
var datepic=“#date”+i；
$（'#addr'+i）.html（“+（i+1）+”d”）；
$（datepic.datepicker（）；
$（'#tab_logic'）。追加（''）；
i++；
});
$（“#删除_行”）。单击（函数（）{
如果（i>1）{
$（“#addr”+（i-1））.html（“”）；
我--；
}
});
$（“.category”）。单击（函数（）{
警报（“df”）；
});
});
$（函数（）{
var startDate=新日期（2015年2月30日）；
$（“#date0”）.datepicker（'setDate'，startDate）；
});

对于动态添加的行，请使用

.on（）

添加单击事件句柄，因为在为“添加行”按钮附加单击处理程序时，动态行不存在，因此您需要使用

文档

附加单击事件处理程序，它将事件委托给匹配的选择器

$(document).ready(function(){
      var i=1;
     $(document).on("click", "#add_row", function(){
        var datepic = "#date" + i;
        $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input id = 'date"+
          i+"'  name='name" + i + 
          "' type='text' placeholder='Name' class='form-control input-md'/>" 
          + "</td><td><input  name='mail" + 
          i + "' type='text' placeholder='Mail'  class='form-control input-md'>"
          +"</td><td><select class='input category'><option selected>d</option></select>"
          +"</td>");

        $(datepic).datepicker();

         $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
            i++; 
     });

     $(document).on("click","#delete_row", function(){
         if(i>1){
         $("#addr"+(i-1)).html('');
         i--;
         }
     });

    $(document).on("click", ".category", function(){
        alert('df');
     });
});

$（文档）.ready（函数（）{
var i=1；
$（文档）。在（“单击”，“添加行”，函数（）上）{
var datepic=“#date”+i；
$（'#addr'+i）.html（“+（i+1）+”
+ ""
+“d”
+"");
$（datepic.datepicker（）；
$（'#tab_logic'）。追加（''）；
i++；
});
$（文档）。在（“单击”，删除行），函数（）上{
如果（i>1）{
$（“#addr”+（i-1））.html（“”）；
我--；
}
});
$（document）.on（“click”，“.category”，function（））{
警报（“df”）；
});
});

更改此选项：

$(".category").click(function(){
    alert('df');
     });

为此：

$(document).on('click', '.category', function(){
        alert('df');
});

它被称为委托事件

片段：

#
名称
邮寄
可移动的
1.
选择选择器2
添加行删除行
$（文档）.ready（函数（）{
var i=1；
$（“#添加_行”）。单击（函数（）{
var datepic=“#date”+i；
$（'#addr'+i）.html（“+（i+1）+”d”）；
$（datepic.datepicker（）；
$（'#tab_logic'）。追加（''）；
i++；
});
$（“#删除_行”）。单击（函数（）{
如果（i>1）{
$（“#addr”+（i-1））.html（“”）；
我--；
}
});
$（文档）.on（'click'，'category'，function（）{
警报（“df”）；
});
});
$（函数（）{
var startDate=新日期（2015年2月30日）；
$（“#date0”）.datepicker（'setDate'，startDate）；
});