Question

我的项目中有一个表，其第一行是输入字段。

这些输入字段具有Jquery事件，例如 keyup 和 keydown 。同样在我的第一栏中，我使用了 select2 。

第一列：

<td class="input-list-produto">@Html.ListBoxFor(model => model.Produto.DescricaoProduto, new MultiSelectList(Model.Produtos, "CodigoProduto", "DescricaoProduto"), new { @class = "form-control select-multiple" })</td>

这是我的Java脚本代码：

$("#Produto_DescricaoProduto").select2({});

 $("#Produto_PrecoEmbalagem").keyup(function (e) {
        var key = e.which || e.charCode || e.keyCode;
        if (key != KisaborUtils.KEY_DOWN_TAB_VALUE) {
            var quantEmb = $("#Produto_QuantidadePorEmbalagem").val();
            var precoEmb = $("#Produto_PrecoEmbalagem").val();

            var precoEmbNorm = KisaborUtils.normalizeDecimalNumber(precoEmb);
            var precoUni = precoEmbNorm / quantEmb;

            var valor = Math.round(precoUni * 100) / 100
            $("#Produto_PrecoUnitario").val(valor);
        }
    });

    $("#Produto_PrecoUnitario").keyup(function (e) {
        var key = e.which || e.charCode || e.keyCode;
        if (key != KisaborUtils.KEY_DOWN_TAB_VALUE) {
            var quantEmb = $("#Produto_QuantidadePorEmbalagem").val();
            var precoUni = $("#Produto_PrecoUnitario").val();

            var precoUniNorm = KisaborUtils.normalizeDecimalNumber(precoUni);
            var precoEmb = precoUniNorm * quantEmb;

            var valor = Math.round(precoEmb * 100) / 100
            $("#Produto_PrecoEmbalagem").val(valor);
        }
    });

我的应用程序运行完美。但是，在项目执行期间，我不得不将表更改为等于以下示例： enter link description here

让我的桌子全屏显示。

但是通过添加 data-toggle =“ table” ，我丢失了所有来自 jquery 和库 Select2

的事件

这是我的桌子：

                            <table class="tableProduto"
                               data-toggle="table"
                               data-toolbar="#toolbar"
                               data-height="460"
                               data-show-fullscreen="true">
                            <thead>
                                <tr>
                                    <th>Produto</th>
                                    <th>Quantidade</th>
                                    <th>Preço embalagem R$</th>
                                    <th>Preço Unitário R$</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="input-list-produto">@Html.ListBoxFor(model => model.Produto.DescricaoProduto, new MultiSelectList(Model.Produtos, "CodigoProduto", "DescricaoProduto"), new { @class = "form-control select-multiple" })</td>
                                    <td>@Html.EditorFor(model => model.Produto.QuantidadePedido, new { htmlAttributes = new { @class = "form-control input-grid input-sm", @type = "number", @min = "0", @step = "1", @value = "0" } })</td>
                                    <td>@Html.EditorFor(model => model.Produto.PrecoEmbalagem, new { htmlAttributes = new { @class = "form-control input-grid input-sm", @type = "text", @min = "0", @value = "0" } })</td>
                                    <td>@Html.EditorFor(model => model.Produto.PrecoUnitario, new { htmlAttributes = new { @class = "form-control input-grid input-sm", @type = "text", @min = "0", @value = "0" } })</td>
                                    <td id="salvarItem"><button type="button" class="btn btn-success btn-sm">SALVAR</button></td>
                                </tr>
                            </tbody>
                        </table>

我的问题是，如何将表与 data-toggle =“ table” 一起使用，而又不会丢失JavaScript事件？

Answer 1

替换

$("#Produto_PrecoEmbalagem").keyup(function (e) {
  //whatever...
}

与

$('body').on('keyup', '#Produto_PrecoEmbalagem', function(e){
  //whatever...
})

详细了解事件委托here。

要提高页面的性能，您想将事件委托给事件所应用的所有元素的最小可能的公共父对象，而不是绑定到'body'，而应该绑定到该元素。

select2在带data-toggle =“ table”的表中不起作用

1 个答案: