要素を動的に作成し、その値を関数onkeyupのパラメータとして渡そうとしています

私はテーブルに行を追加しています。行の中の1つのセルには、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を呼び出しています。教えてください –

これは上のコードにあります。それはただの警告です。 – phpmeh

感謝を！

Btw、あなたは何のためにも人生を複雑にしています。 value=hello world：

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を渡す問題は、あなたが次の値を渡しているということです。

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

はここで（、blablabla innerHTMLプロパティなし、悪DOM互換の）正しい方法です。

もう1つの問題は、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

あなたはこのように値を渡すことができます - 私はにinsertRow、rowIndexプロパティとinsertCellを発見作るため

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

あなたはonchangeupの代わりにonchangeまたは何かを試しました..あなたはそれが正常に関数を呼び出していることを確認しました.. –

要素を動的に作成し、その値を関数onkeyupのパラメータとして渡そうとしています

答えて

関連する問題