时间戳

首页 > 解决方案 > jQuery 方法不适用于附加数据和委托

javascript - jQuery 方法不适用于附加数据和委托

问题描述

我有这个表体：

<tbody class="resultado" id="lista">

</tbody>

然后我使用“填充”它

$('.resultado').html(data);

'data' 变量来自 Ajax。其中一列是

<td>
     <div class="qtd" style="width: 60px;">
         <input id="qtd{{$produto->id}}" type="text" class="form-control" name="quantidade" >
     </div>
 </td>

这个输入，当我按下回车键时，调用这个方法：

$(document).on('keyup','.qtd' ,function(event)
{
    var tecla = event.which;

    if (tecla === 13) {
        event.preventDefault();

        var value = $(this).attr("value");
        var row = $(this).closest('tr');
        var columns = row.find('td');

}

如果我使用 foreach 静态填充 tbody 它可以工作，但是当我使用 html() 方法动态创建它们时它不起作用。

var value = $(this).attr("value");

即使我正在使用事件委托，也会导致未定义或垃圾，或者是吗？谢谢

添加了片段。目标是在输入框中键入一个值并将其显示在警报上

//Enter 
$(document).on('keyup','input' ,function(event)
{
    var tecla = event.which;
    
    if (tecla === 13) {
        event.preventDefault();

        // var value = e.target.getAttribute('value');
        var value = $(this).attr("value");
        alert (value);
        var row = $(this).closest('tr');
        var columns = row.find('td');
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table table-striped">
                <thead class="thead-dark">
                    <th class="w-50">Material</th>
                    <th>Unidade</th>
                    <th>Estoque</th>
                    <th class="w-25">Preço</th>
                    <th>Qtd</th>
                </thead>
                <tbody class="resultado" id="lista">
                   
                </tbody>
                
                <script> 
                
                data = '<tr><td>nome</td><td>unidade</td><td><div class="qtd" style="width: 60px;"><input id="qtd{{$produto->id}}" type="text" class="form-control" name="quantidade" ></div></td></tr>';
                
                 $('.resultado').html(data);
                
                </script>

标签： javascriptjqueryajax

解决方案

您应该绑定输入，并且不应该读取 attr 来获取值。

$("#lista").on('keyup', '.qtd input', function(event) {
  var tecla = event.which;
  if (tecla === 13) {
    var input = $(this)
    event.preventDefault();
    var value = input.val();
    var row = input.closest('tr');
    var columns = row.find('td');
    console.log(value);
  }
})


var data = new Array(5).fill('<tr><td class="qtd"><input/></td></tr>').join('');
$('.resultado').html(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody class="resultado" id="lista">
  </tbody>
</table>

推荐阅读