输入新号码时更改输入类型号码的事件

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>

有什么建议吗？

编辑：一些额外的信息，该行是用一个按钮动态添加的。我检查了该行的其他按钮，它们有效。他们都使用 on('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

解决方案 所有按键事件箭头、按键、鼠标滚轮

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

You need to put single quotes in class. Try this, Will definitely work.

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

Answer 4

Remember one thing always while writing the JS , you should always check the console

根据您当前的代码 $(.form-control)，控制台中必须有一个类似 unexpected token . 的错误日志，因为它需要在引号内，它应该类似于 $(".form-control")，但它没有不管你可以单引号还是双引号

Answer 5

感谢那些指出我错字的人。我已经为此修复了代码。我的主要问题是更改事件没有触发我动态添加的行。

解决方案是让更改事件检测父项中的更改，其中将包含动态添加的行，在本例中为 tbody。

新功能代码如下

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

输入新号码时更改输入类型号码的事件

change event for input type number when input new number

jquery

onchange