Ajax 函数在 JQuery 追加中调用时不起作用

Ajax function doesn't work when called inside a JQuery append

本文关键字：调用不起作用追加函数 JQuery Ajax 更新时间：2023-09-26

我在 JQuery 附加中有一个 onChange 函数来调用 ajax 函数。这是我的代码：

var data='<?php echo $data; ?>';
var tambah=1;
var txt=1;
function add_fullboard_dalam_kota(){

    function showU(str)
    {
        if (str=="")
        {
            document.getElementById(txt).innerHTML="";
            return;
        }
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById(txt).innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","gettujuan5.php?q="+str,true);
        xmlhttp.send();
    }

    $("#fullboard_dalam_kota").append('<tr align="center" valign="middle" bgcolor="#E4E4E4">'
        +'<td width="19%" ><input name="penyelenggara[]" type="text" id="'+tambah+'" onchange=showU(this.value)></td>'
        +'<td width="19%" ><div id="'+txt+'"><b></b></div>'  
        +'</td>'
        +'<td width="19%" ><input name="jumlah_peserta[]" type="text" id="jumlah_peserta[]"></td>'
        +'<td width="19%" ><input name="jumlah_hari[]" type="text" id="jumlah_hari[]"></td>'
        +'</tr>')


    tambah=tambah+1;
    txt=txt+1;
}
var data='<?php echo $data; ?>';
var tambah=1;
var txt=1;
function add_fullboard_dalam_kota(){

    function showU(str)
    {
        if (str=="")
        {
            document.getElementById(txt).innerHTML="";
            return;
        }
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById(txt).innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","gettujuan5.php?q="+str,true);
        xmlhttp.send();
    }

    $("#fullboard_dalam_kota").append('<tr align="center" valign="middle" bgcolor="#E4E4E4">'
        +'<td width="19%" ><input name="penyelenggara[]" type="text" id="'+tambah+'" onchange=showU(this.value)></td>'
        +'<td width="19%" ><div id="'+txt+'"><b></b></div>'  
        +'</td>'
        +'<td width="19%" ><input name="jumlah_peserta[]" type="text" id="jumlah_peserta[]"></td>'
        +'<td width="19%" ><input name="jumlah_hari[]" type="text" id="jumlah_hari[]"></td>'
        +'</tr>')


    tambah=tambah+1;
    txt=txt+1;
}

但显然 onchange 函数不起作用，因为它不返回 ajax 值。我的代码有什么问题？

问题是您在 showU 方法中使用了全局变量txt，因此 txt 始终会指向页面中不存在的id。

var data = '<?php echo $data; ?>';
var tambah = 1;
var txt = 1;
function showU(str, txt) {
    if (str == "") {
        document.getElementById(txt).innerHTML = "";
        return;
    }
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById(txt).innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "gettujuan5.php?q=" + str, true);
    xmlhttp.send();
}

function add_fullboard_dalam_kota() {
    $("#fullboard_dalam_kota").append('<tr align="center" valign="middle" bgcolor="#E4E4E4">' + '<td width="19%" ><input name="penyelenggara[]" type="text" id="' + tambah + '" onchange="showU(this.value, ''' + txt + ''')"></td>' + '<td width="19%" ><div id="' + txt + '"><b></b></div>' + '</td>' + '<td width="19%" ><input name="jumlah_peserta[]" type="text" id="jumlah_peserta[]"></td>' + '<td width="19%" ><input name="jumlah_hari[]" type="text" id="jumlah_hari[]"></td>' + '</tr>');
    showU();
    tambah = tambah + 1;
    txt = txt + 1;
}

注意：使用 jQuery.ajax（）而不是使用本机 ajax

在这种情况下，由于您正在加载 html 片段使用

function showU(str, txt) {
    if (str == "") {
        $('#' + txt).empty()
        return;
    }
    $('#' + txt).load("gettujuan5.php?q=" + str);
}