jQuery Ajax 局部 View 只工作一次

Question

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

然而，这只能工作一次。我点击按钮，它会像它应该的那样在幕后完成所有事情，它会像它应该的那样替换 html。然后，当我再次单击按钮时什么也没有，就像这些按钮不再存在 jQuery 一样。没有页面重新加载，这都是通过 ajax 完成的。

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

返回此部分 View 时，我的 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

您应该使用委托(delegate)事件处理程序，如下所示:

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