动态创建一个元素并尝试将其值作为参数传递给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

回答

相关问题