изменить событие для ввода типа номера при вводе нового номера

Question

Я пытаюсь получить значение ввода, чем проверить, изменилось ли оно, по умолчанию значение равно 1. При изменении, вводе или увеличении значения с помощью клавиш со стрелками запускается прослушиватель изменений. До сих пор он не срабатывает, когда я изменяю значение по умолчанию.

Код строки, из которой я хочу извлечь входное значение.

<tr class="deleteRow">
    <th scope="row">
        <button type="button" class="btn btn-danger btn-sm">
            <i class="fas fa-trash"></i>
        </button>
    </th>
    <td>Item 1</td>
    <td>
        <input class="form-control" type="number" value="1" />
    </td>
    <td>RM 50.00</td>
</tr>

Мой код функции пока:

<script>
    $('.form-control').change(function(){
        alert("this doesn't fire help!");
    });
</script>

Любой совет?

РЕДАКТИРОВАТЬ: некоторая дополнительная информация, строка добавляется динамически с помощью кнопки. Я проверил другие кнопки для строки, они работают. Они все используют ('click'), кроме ввода числа, над которым я работаю.

РЕДАКТИРОВАТЬ РЕДАКТИРОВАТЬ: Таким образом, он не работает на строки, добавленные после загрузки страницы. Если строки были добавлены после программно, слушатель не работает.

Answer 1

Попробуйте следующее, в вашем коде отсутствует ', оно должно быть '.form-control':

$('.form-control').change(function(){
  alert("this doesn't fire help!");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr class="deleteRow">
    <th scope="row">
        <button type="button" class="btn btn-danger btn-sm">
            <i class="fas fa-trash"></i>
        </button>
    </th>
    <td>Item 1</td>
    <td>
        <input class="form-control" type="number" value="1" />
    </td>
    <td>RM 50.00</td>
</tr>

Answer 2

Спасибо тем, кто указал на мою опечатку. Я исправил код для этого. Моя главная проблема заключалась в том, что событие изменения не сработало для моих динамически добавляемых строк.

Решение заключается в том, что у меня было событие изменения, обнаруживающее изменения в родительском элементе, который будет содержать динамически добавленные строки, что в данном случае, будьте tbody.

Новый код функции, как показано ниже.

$('.table tbody').on('input',function(){
     alert("this doesn't work help!");
});

Answer 3

Помните одну вещь всегда при написании JS , вы всегда должны проверять консоль

С вашим текущим кодом $(.form-control) в журнале должна быть ошибкаконсоль что-то вроде unexpected token ., потому что она должна быть внутри кавычек, это должно быть что-то вроде $(".form-control"), не имеет значения, вы можете использовать одинарные или двойные кавычки

Answer 4

Решение Все ключевые события стрелка, нажатие клавиши, колесо мыши

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <tr class="deleteRow">
        <th scope="row">
            <button type="button" class="btn btn-danger btn-sm">
                <i class="fas fa-trash"></i>
            </button>
        </th>
        <td>Item 1</td>
        <td>
            <input class="form-control" type="number" value="1" />
        </td>
        <td>RM 50.00</td>
    </tr>
<script>
$(document).ready(function() {
    $('.form-control').on('input', function() {
        alert($('.form-control').val())
      });
});
</script>

Answer 5

Вам нужно поставить одинарные кавычки в классе. Попробуйте это, безусловно, будет работать.

$('.form-control').change(function(){
        alert("this doesn't fire help!");
    });