jquery - 在表加载运行其他 jQuery

Question

我想在使用 jQuery 的按钮单击时显示输入文本框，例如https://www.jqueryscript.net/table/table-editing-creation-bootstable.html我正在使用 jQuery 数据表。到目前为止，这是我的桌子。但是 jQuery 不适用于我的 jQuery 数据表，我认为这是因为该表尚未加载，但我不确定。

这是我的桌子

<div class="dvScroll">
    <div style="width:100%; margin:0 auto" class="tablecontainer">
        <table class="table table-hover table-bordered" id="myDatatable">
            <thead>
                <tr>
                    <th>Armario</th>
                    <th>Cajon</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tfoot class="add-table-footer">
                <tr>
                    <td colspan="4">
                        <div>
                            @using (Html.BeginForm("Anadir", "gestiondeubicaciones", FormMethod.Post))
                            {
                                <div class="form-row">
                                    <div class="col-md-5 mb-3">
                                        @Html.TextBoxFor(a => a.armario, new { @class = "form-control" })
                                        @Html.ValidationMessageFor(a => a.armario)
                                    </div>
                                    <div class="col-md-5 mb-3">
                                        @Html.TextBoxFor(a => a.cajon, new { @class = "form-control" })
                                        @Html.ValidationMessageFor(a => a.cajon)
                                    </div>
                                    <div class="col-md- mb-3">
                                        <button class="add-btn-table"><i class="material-icons-add" title="Crear nuevo">add_box</i></button>
                                    </div>
                                </div>
                            }
                        </div>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

这是我填满表格的 jquery。

 <style>
        tr.even {
            background-color: #F5F5F5 !important;
        }
    </style>

 @section Scripts{
    <script type="text/javascript" charset="utf8" src="~/Scripts/DataTables/jquery.dataTables.js"></script>
    <script>

        $(document).ready(function () {
            var oTable = $('#myDatatable').DataTable({
                "ajax": {
                    "url": '/gestiondeubicaciones/GetEmployees',
                    "type": "get",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "armario", "autoWidth": true }, /* index = 0 */
                    { "data": "cajon", "autoWidth": true },  /* index = 1 */
                    {
                        "data": "ubicacion_id", "width": "50px", "render": function (data) {
                            return '<a id="edit' + data + '" class="edit" href="#"><i class="material-icons" title="Editar">edit</i></a>' +
                                '<a id="editCancel' + data + '" style="display: none;" class="editCancel" href="#"><i class="material-icons" title="Anular">cancel</i></a>' +  /* index = 2 */
                                '<a class="popup" href="/gestiondeubicaciones/Eliminar/' + data + '"><i class="material-icons" title="Eliminar">delete</i></a>';
                        }
                    }
                ],
                'columnDefs': [{
                    'targets': [2], /* column index */
                    'orderable': false, /* true or false */
                }]



            })
            $('.tablecontainer').on('click', 'a.popup', function (e) {
                e.preventDefault();
                OpenPopup($(this).attr('href'));
            })
            function OpenPopup(pageUrl) {
                var $pageContent = $('<div/>');
                $pageContent.load(pageUrl, function () {
                    $('#popupForm', $pageContent).removeData('validator');
                    $('#popupForm', $pageContent).removeData('unobtrusiveValidation');
                    $.validator.unobtrusive.parse('form');

                });

                $dialog = $('<div class="popupWindow" style="overflow:auto"></div>')
                    .html($pageContent)
                    .dialog({
                        draggable: false,
                        autoOpen: false,
                        resizable: false,
                        model: true,
                        title: 'Gestion de ubicaciones',
                        height: 550,
                        width: 600,
                        close: function () {
                            $dialog.dialog('destroy').remove();
                        }
                    })

                $('.popupWindow').on('submit', '#popupForm', function (e) {
                    var url = $('#popupForm')[0].action;
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: $('#popupForm').serialize(),
                        success: function (data) {
                            if (data.status) {
                                Notify("Success");
                            }
                        }
                    })

                    e.preventDefault();
                })
                $dialog.dialog('open');
            }
        })

    </script>
}

用于 UI 的 jquery

<script>
        $('table').SetEditable({
            $addButton: $('#but_add')
        })

        $('table').SetEditable({
            $addButton: $('#but_add'),
            columnsEd: null
        })

        $('table').SetEditable({
            onEdit: function () { },
            onDelete: function () { },
            onBeforeDelete: function () { },
            onAdd: function () { }
        })
</script>

我的问题是为什么 UI 的 jQuery 不能与填充表格的 jQuery 一起使用。感谢您的任何帮助。

标签： jqueryasp.net-mvc