JavaScript 在 jQuery 创建的内容中无法正常工作

Question

我有this number input jQuery plugin包含在我的项目中。它在默认 HTML 内容上工作正常，但是当我使用 jQuery 创建表格行时它不工作。应该有 jQuery 数字输入，但有常规的 HTML5 数字输入。

我如何调用函数 bootstrapNumber()

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-number-input.js"></script>
<script>
    $("input[type='number']").bootstrapNumber();
</script>

这就是 jQuery 创建行的方式

var row = '<tr id="product' + value.ID + '"><td>' + value.name + '</td>'
            + '<td class="text-right"><input class="form-control" type="number" value="1" min="0" />' + value.unit + '</td>'
            + '<td class="text-right">' + value.price + ' ' + value.currency + '</td></tr>';

Answer 1

这可能是因为您在代码的开头只调用了一次 .bootstrapNumber()。每次使用 jQuery 向表中添加一行时都需要调用它。

<script>
    function addRowToTable(value) {
        var row = '<tr id="product' + value.ID + '"><td>' + value.name + '</td>'
                + '<td class="text-right"><input class="form-control" type="number" value="1" min="0" />' + value.unit + '</td>'
                + '<td class="text-right">' + value.price + ' ' + value.currency + '</td></tr>';

        //add row to table here

        $("input[type='number']").bootstrapNumber(); //call the plugin again to make the new input of a bootstrapNumber input
    }
</script>

此外，如果您在页面加载时已经有一些输入，您需要将其添加到 - 请记住不要只写

$("input[type='number']").bootstrapNumber();

在脚本的开头，你必须把它包在一个

$(document).ready(function() {
    $("input[type='number']").bootstrapNumber();
});

在加载 DOM 之前不要操作 DOM。