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);
});

这里，您的容器元素应该已经可用，并且其中的内容将被动态呈现。这会自动将click事件绑定到值为编辑

的所有类名

带有输入字段jquery的动态表单击编辑按钮，启用字段

1 个答案: