jQuery Ajax 局部视图只工作一次

Question

我有一个 asp.net 页面，它在我当前正在工作的选项卡中返回部分视图。我已经设置了 jQuery，它可以工作。它工作一次，并通过 ajax 返回部分视图.html(result);

但是，这只适用于一次。我单击按钮，它在幕后完成所有应有的操作，它按应有的方式替换了 html。然后，当我再次单击该按钮时，就像这些按钮不再存在 jQuery 一样。没有页面重新加载，这都是通过 ajax 完成的。

第一次加载页面时使用的 HTML 和通过 .html(result) 返回的 HTML 是完全相同的 html 相同的部分视图用于两者。

返回这个局部视图时，我的 jQuery 是否以某种方式断开连接？

这是我的 Ajax 调用：

function updateSort(object) {
    jQuery.ajax({
        url: "/MasterList/UpdateSort",
        type: "get",
        data: object, //if you need to post Model data, use this
        success: function (result) {
            //alert('success');
            //console.log(result);
            jQuery("#procedures").html(result);
        }
    });
}

这里是按钮点击：

jQuery(".btnMoveUp").click(function () {
        var $this = jQuery(this),
            processID = $this.data('processid'),
            currProcedureID = $this.data('procedureid'),
            currSortOrder = $this.data('sortorder'),
            idx = jQuery('.commentlist li').index($this.closest('li')),
            $prevLi = jQuery('.commentlist li').eq(idx - 1),
            $anchor = $prevLi.find('.btnContainer a'),
            prevProcedureID = $anchor.data('procedureid'),
            prevSortOrder = $anchor.data('sortorder');

        // create object that we can pass to MVC controller
        var objProcedure = {};

        objProcedure = {
            _processID: processID,
            _currProcedureID: currProcedureID,
            _currSortOrder: currSortOrder,
            _switchProcedureID: prevProcedureID,
            _switchSortOrder: prevSortOrder
        }

        updateSort(objProcedure);

    });

为什么这只工作一次？

Answer 1

我遇到了类似的问题，这是因为响应被缓存了。您可以将缓存的 jQuery ajax 属性设置为 false。

$.ajaxSetup({ cache: false });

Answer 2

在您的操作中使用[OutputCache] 属性来帮助避免缓存。

[OutputCache(Duration = 0)]

Answer 3

您应该使用委托事件处理程序，如下所示：

$('#procedures').on('click', '.btnMoveUp', function () {
    var $this = jQuery(this),
        processID = $this.data('processid'),
        currProcedureID = $this.data('procedureid'),
        currSortOrder = $this.data('sortorder'),
        idx = jQuery('.commentlist li').index($this.closest('li')),
        $prevLi = jQuery('.commentlist li').eq(idx - 1),
        $anchor = $prevLi.find('.btnContainer a'),
        prevProcedureID = $anchor.data('procedureid'),
        prevSortOrder = $anchor.data('sortorder');

    // create object that we can pass to MVC controller
    var objProcedure = {};

    objProcedure = {
        _processID: processID,
        _currProcedureID: currProcedureID,
        _currSortOrder: currSortOrder,
        _switchProcedureID: prevProcedureID,
        _switchSortOrder: prevSortOrder
    }

    updateSort(objProcedure);
});