jQuery的Ajax的局部视图只工作一次 [英] jQuery Ajax partial view only working once

问题描述

我有一个asp.net页面返回的标签我目前在做我的工作中的局部视图。我有jQuery的所有设置和它的作品。它的工作原理一次，并通过AJAX返回的局部视图 html的（结果）;

I have an asp.net page that returns a partial view in the tab I am currently doing my work in. I have the jQuery all set up and it works. It works one time and through ajax returns a partial view .html(result);

然而，这只能一次。我点击它幕后的一切都像它应该，它取代了HTML像它应该的按钮。然后，当我再次单击该按钮没有，它像了jQuery不会为这些按钮存在了。有没有重新加载页面，这是通过AJAX全部完成。

However this only works one time. I click the button it does everything behind the scenes like it should, it replaces the html like it should. Then when I click the button again nothing, its like the jQuery doesn't exist for these buttons any more. There is no page reload this is all done through ajax.

这当页面第一加载并通过html的（结果）返回的HTML所使用的HTML是完全相同的html相同局部视图用于两个

the HTML that is used when the page first is loaded and the HTML returned through .html(result) is the exact same html same partial view is used for both.

是我的jQuery不知何故被断开时，返回此局部视图？

Is my jQuery somehow being disconnected when this partial view is returned?

下面是我的Ajax调用：

Here is my Ajax call:

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);

    });

为什么会变成这样的工作只有一个时间？

Why would this work only a single time?

推荐答案

您应该使用委派的事件处理程序，像这样：

You should be using a delegated event handler, like so :

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

这篇关于jQuery的Ajax的局部视图只工作一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！