Question

我有一个可以包含一些动态创建的输入的表，因此用户可以输入一些值并进行一些计算：

<table>
   <thead>...</thead>
   <tbody>
     <tr>
        <td>Info</td>
        <td><input class="inputsTable"/></td>
        <td><input class="inputsTable"/></td>
   </tbody>
</table>

当用户输入一个值并且发生模糊事件时，系统将进行一些计算。我遇到了“多个模糊事件触发”问题，我这样解决：

<script>
    $(document).ready(function () {        
        $(".inputsTable").mask("#.##0,00", { reverse: true });
        //setting up masks
    });

    let isBound = false;
    $('.inputsTable').on('input propertychange paste', function () {
        if (!isBound) {
            isBound = true;
            $(this).on('blur', function () {
                alert($(this).val());
            });
        }
    });

</script>

它适用于第一个输入。如果我尝试从第二个输入触发模糊事件，它将无法正常工作。如果我重置isBound变量：

$('.inputsTable').on('input propertychange paste', function () {
            if (!isBound) {
                isBound = true;
                $(this).on('blur', function () {
                    alert($(this).val());
                    isBound = false;
                });
            }
        });

有时它可以工作，但有时会多次触发。我该如何解决？

Answer 1

如果可行，请尝试此操作。如果要动态插入或添加输入，则应使用document重新加载DOM。

 $(document).on('.inputsTable','input propertychange paste', function () {
        if (!isBound) {
            isBound = true;
            $(this).on('blur', function () {
                alert($(this).val());
                isBound = false;
            });
        }
    });

OR

 $(document).on('.inputsTable','input propertychange paste', function () {
         $(this).on('blur', function () {
            alert($(this).val());
         });
    });

但是，如果您上传完整的代码，那就没问题了。

动态创建输入时，模糊事件无法按预期工作

1 个答案: