Question

我正在尝试使用jquery创建排序。它仅在用户第一次单击th标记时起作用，但在ajax函数上的POST请求之后，用户无法再次单击th标记。这是我的代码。请帮助，提前谢谢。

$("#sortHeader th").click(function () {
    event.preventDefault();
    sortValue= $(this).attr("data-value");
    $(this).siblings('data-sort').attr('class', 'sorting');
    if($(this).hasClass('sorting')){
        $(this).attr('class', 'sorting_asc');
        sortOrder="asc";
    }
    else if($(this).hasClass('sorting_asc')){
        $(this).attr('class','sorting_desc');
        sortOrder="desc";    
    }
    else  if($(this).hasClass('sorting_desc')){
        $(this).attr('class', 'sorting_asc');
        sortOrder="asc";
    }
    var saved =  $('#sortHeader').clone();//save state sort active column
    sort(this, saved);// function to call data on Controller
}); 

function sort(e,saved) {
    $.ajax({
        url: '@Url.Action("Method","Controller")',
        type: "POST",
        cache: false,
        data: { query: null, search: $('#QueryString').val(), sort: sortOrder, sort_value: sortValue, Id: $('#Id').val() },
        success: function (data) {
            $("body").html(data);
           //replace the headers with the old state
            $('#sortHeader').replaceWith(saved);
            $("#sortHeader th").unbind("click")// unbind click event
        },
    })
};

Answer 1

从$("#sortHeader th").unbind("click") ajax功能中删除行success，您需要click事件委派，因为您的内容会动态加载，如下所示。

$(document).on('click', '#sortHeader th', function () {
    // do your task here
});

希望这能解决您的问题。

POST后使用JQUERY

1 个答案: