Question

我有一个ajax函数，它在数据更新后提交数据并刷新div。问题是，在提交表单后，div中的jQuery元素会中断，并且div已经刷新。

function getURLParameter(name) {
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
}
tournamentid = getURLParameter('id');
$(document).ready(function () {
    $(document).on('click', "button#submit" ,function(){
        $.ajax({
            type: "POST",
            url: "test.php?page=tourneys&id=" + tournamentid + "&action=teams&submit=true", //process to mail
            data: $('#swapteams').serialize(),
            success: function(msg){
                createNoty('The teams has been updated!', 'success');
// Refresh the div after submission
                $("#refresh").load("test.php?page=tourneys&id=" + tournamentid + "&action=teams #refresh");
            },
            error: function(xhr, status, error) {
              var err = eval("(" + xhr.responseText + ")");
              alert(err.Message);
}
        });
        return false;
    });
});
// the plugins and jQuery variables within the refresh div
$(document).ready(function() {
    $('a[id^="teamname"]').editable({
    ajaxOptions : {
        type : 'post'
    }
});
});
$(document).ready(function() {
    $('select[id="swap"]').change(function(){
      $( "#saveprogress" ).show("fade");
    });
});

Answer 1

您需要使用事件委派来支持动态添加的元素，还需要在刷新div后再次初始化插件

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null
}
tournamentid = getURLParameter('id');
$(document).ready(function () {
    $(document).on('click', "button#submit", function () {
        $.ajax({
            type: "POST",
            url: "test.php?page=tourneys&id=" + tournamentid + "&action=teams&submit=true", //process to mail
            data: $('#swapteams').serialize(),
            success: function (msg) {
                createNoty('The teams has been updated!', 'success');
                // Refresh the div after submission and pass a callback which will initialize the plugins
                $("#refresh").load("test.php?page=tourneys&id=" + tournamentid + "&action=teams #refresh", createEditable);
            },
            error: function (xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                alert(err.Message);
            }
        });
        return false;
    });
});
// the plugins and jQuery variables within the refresh div
$(document).ready(createEditable);

function createEditable() {
    $('a[id^="teamname"]').editable({
        ajaxOptions: {
            type: 'post'
        }
    });
}

$(document).ready(function () {
    //use event delegation
    $(document).on('change', 'select[id="swap"]', function () {
        $("#saveprogress").show("fade");
    });
});

div刷新后Javascript中断

1 个答案: