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

尝试以下操作，您的代码缺少'的{{1}}：

'.form-control'

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

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

在编写 JS 时始终记住一件事，您应始终检查控制台

在当前代码为$(.form-control)的情况下，控制台中必须有类似unexpected token .之类的错误日志，因为它必须放在引号中，应该是$(".form-control")之类，但不是可以单引号或双引号

Answer 4

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

解决方案是，我有change事件检测父级中的更改，该父级将包含动态添加的行，在本例中为tbody。

新功能代码如下。

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

Answer 5

您需要在类中添加单引号。试试这个，一定可以。

URI

输入新编号

5 个答案: