在单个表格行上工作的点击事件？

Question

我在jQuery中选择表格的单行时出现问题，这个表格有一个类0123'，然后定义了一个可变数字，所以我的第一行将有一个类edit1，第二个edit2等等。

我的问题是，我可以触发表中最后一行的click事件，我明显知道为什么，但我找不到有关如何实际动态选择这些行的信息。

我试图。每个方法是这样的：

$('table tr').each(function(){ 
     $('.edit{{server->id}}').on('click', function(){ 
       $(this).attr("contenteditable", "true"); 
       $(this).addClass('form-group'); 
       $('div.editable').addClass('form-control'); 
       $('div.hidbtn').removeAttr('hidden'); 
     }); 
}); 

而且这显然不工作，因为在这里我只是{{server->id}}是指从创建该行一个foreach拍摄的最后{{server->id}}。

我怎样才能把它放在一个方式来选择每一行，并为每一个点击事件？

脚本内的foreach？

我很抱歉，如果这会导致这样一个愚蠢的问题..

我使用Laravel 5.4的方式。

在此先感谢！

Answer 1

当您通过每个tr遍历表并需要将事件绑定到每行内部的元素.edit时，那么您只需“查找”该元素并将事件绑定到它。

$('table tr').each(function(){ 
    $(this).find('.edit').on('click', function() { 
     ... 
    }); 
}); 

Answer 2

尝试这样

var id=1; 
$('table tr').each(function(){ 
    $('.edit'+id).on('click', function(){ 
     $(this).attr("contenteditable", "true"); 
     $(this).addClass('form-group'); 
     $('div.editable').addClass('form-control'); 
     $('div.hidbtn').removeAttr('hidden'); 
    }); 
    id+=1; 
}); 

要不然这样
HTML： -

<td onclick="clickFunctio()"></td> 

jQuery的： -

function clickFunctio() { 
     $(this).attr("contenteditable", "true"); 
     $(this).addClass('form-group'); 
     $('div.editable').addClass('form-control'); 
     $('div.hidbtn').removeAttr('hidden'); 
    }