动态表与输入字段jquery点击编辑按钮，启用字段

Question

我正在写一个laravel应用程序，其中我有一个禁用输入字段与edit每个按钮表。我想单击编辑按钮以启用单击该按钮的输入字段。

这是我view.blade.php

@foreach($products as $product) 
       <tbody>  
        <tr> 
        <td class="col-md-2"> 
         <input type="text" name="quantity" id="1" class="form-control" 
         value="{{ $product->quantity }}" disabled="" /> 
        </td> 
        <td class="col-md-7"> 
         <input type="text" name="quantity" id="1" class="form-control" 
         value="{{ $product->description }}" disabled="" /> 
        </td> 
        <td class="col-md-3"> 
         <input type="text" name="quantity" id="1" class="form-control" 
         value="{{ $product->selling_price }}" disabled="" /> 
        </td> 
        <td class="col-md-2"> 
         <button id="edit" type="button" class="btn btn-info"> 
         Edit</button> 
        </td> 
        </tr> 
       </tbody> 
     @endforeach 

这是我的jQuery脚本

 $('#edit').click(function() { 
     $(this).parent().prop('disabled', false); 
    }); 

Answer 1

对于动态生成的HTML，jQuery的点击编辑绑定需要是不同的。为了更清楚起见，最好使用类名而不是编辑按钮的ID，因为可以重用相同的类名，并且ID应该对元素唯一。

jQuery代码应该是这样的

$('.container').on('click', '.edit', function() { 
    $(this).parents('tr').find('input').prop('disabled', false); 
}); 

在这里，你的容器元素应该已经可用，并且内容中会被动态地呈现。这将自动绑定单击事件到所有类名的值编辑