Question

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

然而，这仅适用一次。我单击按钮它会在幕后做它应该做的一切，它会取代它应该的html。然后，当我再次单击该按钮时，它就像这些按钮不再存在jQuery一样。没有页面重新加载这都是通过ajax完成的。

首次加载页面时使用的HTML和通过.html（结果）返回的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

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

$('#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);
});

Answer 2

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

$.ajaxSetup({ cache: false });

Answer 3

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

[OutputCache(Duration = 0)]

jQuery Ajax局部视图只能工作一次

3 个答案: