Question

我有一个简单的表格，其中显示了一些信息。要查看该行的详细信息，我有一个javascript函数：

$('#production tr').bind("click", function(){
    reviewProductionOrder(this);
});

这让我可以选择行并显示相应的信息。但是我在顶部有一个日期选择器，相应地过滤结果

$('#view').bind("click", function(){
    var from_date = $('#from_date').val();
    var to_date = $('#to_date').val();

    $.ajax({
         type : "post", url : "data.php", data : "from_date=" + from_date + "&to_date=" + to_date,
         success : function(data) {
         if(data != '')
             $('#production tbody').html(data);
         }
    });
});

上面的功能让我可以将数据添加到表中。现在我认为bind会让我将javascript函数绑定到新生成的行。但是，当我点击这些行时，我无法这样做。

Answer 1

使用on()

$('#production').on('click' , 'tr', function() {
    // your processing here
});

$(document)部分必须是您要在on() doc页面上监听活动的元素的父元素：

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序的需要。这个 element可以是a中视图的容器元素例如，模型 - 视图 - 控制器设计，或者如果事件是文档 handler希望监视文档中的所有冒泡事件。该文档元素在之前的文档头部中可用加载任何其他HTML，因此可以安全地在那里附加事件等待文件准备好。

Answer 2

你有两种方法可以做到这一点。首先，您需要知道只能绑定现有DOM对象上的事件。因此，当您首先绑定时，绑定现有元素，而不是您要创建的新元素。为了绕过它，jQuery具有与.bind完全相同的功能“.live”，但在初始调用之后继续在DOM对象上应用它。该功能的主要问题是速度较慢。如果你有很多动态的javascript和动画，差别很大，但是没有任何变化就是页面上只有1个表。您还可以在新的附加对象上重新绑定事件，说明您对ajax调用的响应是纯HTML，例如，您可以这样做：

 $('#production tbody').html(data).find('#production tr').bind("click", function(){
    reviewProductionOrder(this); })

这样，您可以在附加事件后绑定事件。

希望它有所帮助。

将javascript绑定到新行

2 个答案: