在 POST 与 JQUERY 之后取消绑定点击

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

从您的 ajax success 函数中删除行 $("#sortHeader th").unbind("click") 并且您需要 click 事件委托，因为您的内容正在动态加载，如下所示。

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

希望这能解决您的问题。

在 POST 与 JQUERY 之后取消绑定点击

Unbind click after POST with JQUERY

sorting

asp.net-mvc

jquery

unbind