動態創建一個元素並嘗試將其值作爲參數傳遞給onkeyup

我正在向表中添加一行。行中的其中一個單元格是我想要進行ajax調用的輸入。但是，我在傳遞輸入值時遇到了問題。動態創建一個元素並嘗試將其值作爲參數傳遞給onkeyup

我已經說明這裏的問題：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
    <head> 
 
    <script language="javascript"> 
 
     function addElement(){ 
 
     var id = 0; 
 
     var tbl = document.getElementById('myTable'); 
 
     var rowInd = document.getElementById('row1').rowIndex; 
 
     rowInd++; 
 
     var row0 = tbl.insertRow(rowInd); 
 
     var cell = row0.insertCell(0); 
 
     // \t cell.innerHTML = '<input type="text" id="myInput'+id+'" value="hello world" onkeyup="alert('+this.value+');" />'; 
 
     // acts as expected: hello world 
 
     // \t cell.innerHTML = '<input type="text" id="myInput'+id+'" value="hello world" onkeyup="makeAjaxRequest(\'value='+this.value+'\')" />'; 
 
     // Outputs: value=undefined 
 
     var theId = "myInput"+id; 
 
     // \t cell.innerHTML = '<input type="text" id="myInput'+id+'" value="hello world" onkeyup="makeAjaxRequest(\'value='+document.getElementById(theId).value+'\')" />'; 
 
     // Output: Object required 
 
     cell.innerHTML = '<input type="text" id="myInput'+id+'" value="hello world" onkeyup=" function(){ makeAjaxRequest(\'value='+this.value+'\') }" />'; 
 
     // Nothing happens 
 
     } 
 

 
     function makeAjaxRequest(val){ 
 
     alert(val); 
 
     } 
 
    </script> 
 
    </head> 
 

 
    <body> 
 
    <span onclick="addElement()"> 
 
     Click me 
 
    </span> 
 
    <br /><br /> 
 
    <table id="myTable"> 
 
     <tr id="row1"><td>hello</td></tr> 
 
    </table> 
 
    </body> 
 
</html>

這將直接到一個Ajax調用，所以我需要能夠訪問該對象和值，以便我做我的搜索。任何幫助表示讚賞。

來源

2012-04-10 phpmeh

你在哪裏調用這個makeAjaxRequest ..請告訴我 – 2012-04-10 07:06:49

它在上面的代碼中。這只是一個警報。 – phpmeh 2012-04-10 07:07:28

謝謝你讓我發現的insertRow和rowIndex和的insertCell！

順便說一句，你讓複雜的生活沒有任何東西。

cell.innerHTML = '<input type="text" id="myInput'+id+'" value="hello world" onkeyup=" function(){ makeAjaxRequest(\'value='+this.value+'\') }" />';

這是正確的方式（DOM兼容，無需innerHTML的邪惡，blablabla）：

var input = document.createElement('input') 
input.type = 'text' 
input.id = 'myInput' + id 
input.value = 'hello world' 
input.onkeyup = function() { 
    makeAjaxRequest(this.value) // this is how to make it work 
} 
cell.appendChild(input) // or use replaceChild depending on your needs

當你通過'value=' + this.value的問題是，你傳遞以下值：value=hello world。

另一個問題是，對於內聯事件處理程序（如HTML中的onkeyup），您不需要包裝在函數中。下面將工作：

cell.innerHTML = '<input type="text" id="myInput'+id+'" value="hello world" onkeyup="makeAjaxRequest(this.value);" />';

我沒有測試過，但我懷疑在另一個函數包裝時，this是不同的。因此爲什麼它不能工作。

爲避免含糊不清，請勿使用HTML事件處理程序。

來源

2012-04-10 08:37:42

你可以這樣傳遞值： -

urlData = "" ; 
    postData = "vendorType=" + jQuery('#EnrollmentRoleId').val() + "&time=" + new Date().getTime(); 

    jQuery.ajax({ 
     url: urlData, 
     data: postData, 
     success: function(data) { 
      //alert(data); 
      jQuery('#EnrollmentVendorId').html(data); 
      jQuery('#user_id_div').show(); 
      jQuery('#loading_image').hide(); 
     } 
    });

來源

2012-04-10 07:14:18

嗨，感謝您的回覆，但我沒有使用JQuery，我沒有AJAX問題。一切都在同一個文件中發生。 – phpmeh 2012-04-10 07:16:03

你試過onchangeup或onkeyup的地方..你有沒有檢查它是正確調用你的功能.. – 2012-04-10 07:19:44

動態創建一個元素並嘗試將其值作爲參數傳遞給onkeyup

回答

相關問題