在JQuery追加内部调用Ajax函数不起作用

Question

我在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功能不起作用，因为它不返回阿贾克斯值。我的代码有什么问题？

Answer 1

问题是您在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); 
}