Ajax Call 移除 UI 元素答案

【问题标题】：Ajax Call removes UI elementsAjax Call 移除 UI 元素
【发布时间】：2020-12-12 14:06:40
【问题描述】：

我在向服务器提交表单数据时遇到问题。数据通过 AJAX 传递到服务器，作为返回帐户，视图组件被重新加载。这可以正常工作，但帐户视图组件中的 Ui 缺少响应式 Ui 控件。下面是我遇到的问题的演示。

当页面调整到超过移动视图宽度并返回加号/减号图标时，响应式控件仍然“工作”，但它是在提交表单时，这些 Ui 元素和下拉功能是已删除，因此无法在移动设备上查看下拉列表中的隐藏记录。下面是它在桌面上的样子。

下面是用于 AJAX Post 和响应式布局的 jquery。

AJAX 帖子

$('#AccountListContainer').on('submit', 'form' ,function (e) {
e.preventDefault()

var container = $("#AccountListContainer")
var dataToSend = $(this).serialize()

$.ajax({
    type: 'POST',
    url: $(this).attr('action'),
    data: dataToSend,
    context: AccountListContainer,

    success: function (data) {
        displayMessage(data.result, data.message)  
        
        //$.get("/Bank/UpdateAccountList", function (data) { container.html(data) })
        $(container).load("/Bank/UpdateAccountList")

        console.log('Ajax post success')
    },

    error: function () {
        console.log('Throw Error')
        //throw Error page?
    }
    
})
});

响应式布局

$(document).ready(responsiveTransactionTable)



function responsiveTransactionTable() {
    var isMobile = false
    var collapsibleHeadings = $('thead > tr').children().filter('.collapsible')

function toggleTableLayout() {
    var wWidth = $(window).width();

    //medium == 768
    if (wWidth >= 992) {
        console.log('You\'re in Desktop view')

        if (isMobile == true) {
            $('tr').unbind();
            $('.toggle-button').remove()
            $('.subData').remove()

            $('tr.data').removeClass('opened')
            isMobile = false
        }

    } else {
        console.log('You\'re in mobile view')
        
        //$('td:first-child').css('color','red')

        if (isMobile == false) {
            $('tr.data > td:first-child').prepend('<span style="padding:5px" class="fas fa-plus toggle-button "></span>')
            isMobile = true
        }

        $('tbody > tr').unbind('click').bind('click.', function (e) {

            var selectedRow = $(this)
            var toggleIcon = selectedRow.find('.fas')

            if (selectedRow.hasClass('opened')) {

                toggleIcon.removeClass('fa-minus').addClass('fa-plus');
                selectedRow.next('tr').remove()
                selectedRow.toggleClass('opened')
            } else {
                toggleIcon.removeClass('fa-plus').addClass('fa-minus');

                var newRow = $('<tr>').addClass('subData')
                var cols = "";

                cols += "<td colspan='100%'>"
                cols += "<div style='dispaly:block'>"
                cols += "<table class='table'>"

                selectedRow.children().filter('.collapsible').each(function (index) {
                    cols += "<tr>"
                    cols += "<th>" + collapsibleHeadings.eq(index).text() + "</th>"
                    cols += "<td>" + $(this).text() + "</td>"
                    cols += "</tr>"
                })

                cols += "</table>"

                newRow.append(cols)
                newRow.insertAfter(selectedRow)

                selectedRow.toggleClass('opened')
            }
        })
    }
}

toggleTableLayout()
$(window).resize(toggleTableLayout)


$('#AccountListContainer').on('show.bs.collapse', '.collapse', function () {
    $(this).prev().find('.fas').removeClass('fa-chevron-down').addClass('fa-chevron-up')

}).on('hide.bs.collapse', '.collapse', function () {
    $(this).prev().find('.fas').removeClass('fa-chevron-up').addClass('fa-chevron-down')
})
}

一段时间以来，我一直在摸索为什么会这样做。任何答案或指示将不胜感激，如果需要，我可以提供更多信息。

问：我将如何在 AJAX 帖子上实现在移动视图中保留加号/减号图标和下拉功能？

谢谢

旁注：演示 Gif 中的错误应该发生在 input == null + 记录是虚拟数据时

【问题讨论】：

听起来您正在用没有事件侦听器的新元素替换具有事件侦听器的元素。如果是这样，请使用事件委托
@charlietfl 是的，我将页面上的#AccountListContainer 替换为来自服务器的更新版本。我查看了 Jquery 的 Delegate 函数，但不太确定如何应用它。我尝试添加 [ $(document).delegate("form", "submit", function () { responsiveTransactionTable() }); ] 到响应的顶部，直到我调整大小并缩小宽度并最终得到两个加号/减号图标
在 ajax 调用之前，您在开始时会做什么以使 UI 控件出现？既然您有了新内容，您是否可能需要再次这样做？
在事件起作用之前需要调整大小是一个奇怪的问题。多年来，我一直在像这样的论坛和旧的 jQuery 论坛上帮助调试，这对我来说有点新。老实说，如果无法访问重现问题的演示，真的很难提供更多帮助
当然，如果你能接近复制它去吧

标签： javascript jquery css ajax

【解决方案1】：

解决方案：

我将我的 ResponsiveTransactionTable() 函数称为 jquerys .load() 的第二个参数

$('#AccountListContainer').on('submit', 'form' ,function (e) {
e.preventDefault()

var container = $("#AccountListContainer")
var dataToSend = $(this).serialize()

$.ajax({
    type: 'POST',
    url: $(this).attr('action'),
    data: dataToSend,
    context: AccountListContainer,

    success: function (data) {
        displayMessage(data.result, data.message)  
        
        //$.get("/Bank/UpdateAccountList", function (data) { container.html(data) })
        $(container).load("/Bank/UpdateAccountList", function () {
            responsiveTransactionTable()
        })
       

        console.log('Ajax post success')
    },

    error: function () {
        console.log('Throw Error')
        //throw Error page?
    }
    
})

});

结果：

感谢@charlietfl 的回复

【讨论】：