使用JQuery在局部视图中更改css

时间:2016-09-26 09:31:25

标签: jquery css ajax asp.net-mvc partial-views

我有一个带有按钮的视图,下面是一个使用ajax和局部视图填充的div。

这是属于视图按钮的代码;

$(document).on('click', '.btn-release', function () {
    StartReleaseVersionEdit();
    ReleaseVersionEdit();
}

使用Ajax我可以改变表格内显示的数据,当我点击页面顶部的按钮时会发生这种情况;

function StartReleaseVersionEdit() {
    var url = '@Url.Action("ChangelogMavisTabel")';
    url = url + '?order=0&paging=1000';
    $.ajax({
        type: "GET",
        cache: false,
        url: url,
        success: function (data) {
            $("div#changelog").html(data);
        }
    });
}

此代码完美无瑕。一旦我想使用JQuery将显示设置为none来改变此局部视图中元素的css,它就会瞬间工作,但之后会立即返回其默认值。

function ReleaseVersionEdit(){    
    $('.releasebutton').css('display','inline');
    // .releasebutton default display=none
}

我该怎么做才能使这项工作正常进行?我不能将JQuery放在局部视图的代码中,因为它是由视图上的按钮触发的。

1 个答案:

答案 0 :(得分:1)

ReleaseVersionEdit()函数移动到AJAX调用的success方法中,这样就可以保证只在部分加载后调用它。请记住,AJAX调用是异步的 - jQuery.ajax()

$(document).on('click', '.btn-release', function () {
     StartReleaseVersionEdit();
  // ReleaseVersionEdit(); Remove from here as this could execute before the partial is loaded
}

function StartReleaseVersionEdit() {
    var url = '@Url.Action("ChangelogMavisTabel")';
    url = url + '?order=0&paging=1000';
    $.ajax({
        type: "GET",
        cache: false,
        url: url,
        success: function (data) {
            $("div#changelog").html(data);
            ReleaseVersionEdit(); // Added here so will always be called after the partial has been loaded
        }
    });
}