Метод jQuery не работает с добавленными данными и делегированием

Question

У меня есть это тело таблицы:

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

Этот ввод, когда я нажимаю 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, это работает, но это не такне работает, когда я создаю их динамически с помощью метода 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">