Question

我有这个桌子的身体：

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

</tbody>

然后我使用“填充”

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

“数据”变量来自Ajax。列之一是

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

当我按Enter键时，此输入将调用此方法：

$(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>

Answer 1

您应该绑定输入，并且不应该读取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>

Answer 2

您很可能想要获取value属性，而不是value属性。该属性与添加到DOM时的属性保持不变。属性更改。

$('input').on('keyup', function(e){
  e.preventDefault();
  console.log(e.target.value, e.target.getAttribute('value'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="Original Value">

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

2 个答案: