Jquery .load两次触发，但被调用一次

Question

I have a problem here, my jquery .load function seems to be running twice even though Im only calling it once. Here is my code:

function updateRowItem(idIn){
if (ready) {
    id = idIn
    $("#controlPanelResult").css("background-color", "");
    var query = {};

    var tid = id.replace("@", "\\@");
    tid = tid.replace(".", "\\.");

    var value =  $('#'+tid).text();

    //var value =  decodeURI(document.getElementById(id).innerHTML);

    //if (value == "<br>"){
    //  value = "NULL"
    //}
    //value = value.replace("&nbsp;"," ")
    //value = value.replace("&amp;","&")

    var split = id.split('@');
    var temp = split[0];
    var uuid = split[1];
    var temp2 = temp.split('.');
    var tableName = temp2[0];
    var item = temp2[1];

    query['table_name'] = tableName;
    query['uuid'] = uuid;
    query[item] = value;

    var tid = id.replace("@", "\\@");
    tid = tid.replace(".", "\\.");

    $.ajax({
    async: false,
    type: "POST",
    //url: '/admin/updateRow?table_name=' + tableName + "&uuid=" + uuid +"&" +     item + "=" + value,
    url: '/admin/updateRow',
    data: query,
    success: function(data) {
            if (data == "1"){ 

                alert ("Hellooo!")//This alert only and always pops up once

                    $('#'+tid).empty().load(showRowsUrl + " #" + tid,function (status) { 
                        alert (status) // This alert pops up first once, then twice, then four times, then eight etc....

                        $("#"+tid).animate({backgroundColor: '#70DB70'}, 'slow');
                        $('#controlPanelResult').html("Updated: " + id);
                        $("#controlPanelResult").animate({ backgroundColor: '#70DB70'}, 'slow');
                        $("#"+tid).animate({backgroundColor: 'white'}, 'slow');
                    });

            } else {
                $('#mainRows').load(showRowsUrl, function() {
                    $("#"+tid).animate({backgroundColor: 'red'}, 'fast');
                    $('#controlPanelResult').html(data);
                    $("#controlPanelResult").animate({backgroundColor: 'red'}, 'fast'); 
                });
            }               
        }
    });
}
}

This causes my divs contents to be constantly repeated, I would appreciate any help in figuring this out

Answer 1

Replace the problematic .load() call with this:

$.get(showRowsUrl, function(data) {
    $('#'+tid).replaceWith($('#'+tid,'<div>'+data+'</div>'));

    $("#"+tid).animate({backgroundColor: '#70DB70'}, 'slow');
    $('#controlPanelResult').html("Updated: " + id);
    $("#controlPanelResult").animate({ backgroundColor: '#70DB70'}, 'slow');
    $("#"+tid).animate({backgroundColor: 'white'}, 'slow');
});

Explanation: .load is loading the element into itself, so there are afterwards two elements with the same ID, nested. Then when you run .load again, it runs on both elements with that ID, and so on.