Jqueryで作成された変数がデバッガに表示されない

Question

Jqueryでボタンを押すと新しい変数が作成され、画面に表示されるコードが書かれています。私は、この新しい変数に何らかのデータを入力してデータベースに保存したいと思いますが、そこに入る前に変数情報に正しくアクセスする必要があります。

<table style="width:90%" class="Long-Term-Conditions"> 
<center> 
<tr> 
    <td><b><center>Long term condition 1:</center></b></td> 
    <td><center><input type='text' id="Var1" name ='Var1' value='%Var1%' /></center></td> 
</tr> 
<tr> 
    <td><b><center>Long term condition 2:</center></b></td> 
    <td><center><input type='text' id="Var2" name ='Var2' value='%Var2%' /></center></td> 
</tr> 
<tr> 
    <td><b><center>Long term condition 3:</center></b></td> 
    <td><center><input type='text' id="Var3" name ='Var3' value='%Var3%' /></center></td> 
</tr> 
</center> 
</table> 
<a href="#" title="" class="add-cond" id="add-cond">Add another long-term health condition</a> 
<div id="Message"></div> 

：HTMLで

は、私はより多くの私のコードは次のようになります10の合計（とうまくデータベースでこれらの店舗）のために7まで追加する3つのテキスト作成ボックスとボタンがあります今私の問題は、私のJqueryの変数が検査できないということです（利用できないと言われています）。その後、データはデータベースに渡されません。私のjQueryのは、次のようになります。

<script> 

    //Adds another row to the above table. 
var counter = 3; 
jQuery('a.add-cond').click(function(event){ 
    event.preventDefault(); 
    if (counter < 10) { 
    counter++; 
    var newRow = jQuery('<tr><td><b><center>'+ "Long term condition "+ counter + ":" + '</center></td> <td><center><input type="text" name="Var' + 
    counter + '" id="Var' + counter + 'value="%Var' + counter + '%"/></center></b></td></tr>'); 
    jQuery('table.Long-Term-Conditions').append(newRow); 
} 
    else 
    { 
    document.getElementById("add-cond").style.visibility = "hidden"; 
    document.getElementById("Message").innerHTML = '<font color="Red">Please 
contact us</font>'; 
} 
}); 

</script> 

コードは、しかし、新たに作成されたテキストボックスに入力されたすべてのデータは、デバッガやデータベースに渡されることはありません新しい変数を作成して動作します。私は間違って何をしていますか？どんな助けもありがとうございます。

Answer 1

あなたが持っている問題は、あなたが要素にクリックイベントをバインドするときドキュメント上にすでに存在する要素にのみバインドされます。新しいイベントを追加すると、そのイベントをトリガーしません。新しいイベントにバインドしなかったからです。

これに対する簡単な解決策はそうのようにボディにclickイベントリスナーを追加することです：

jQuery('body').on('click', 'a.add-cond', function(event){ 

私はそれはあなたが探しているものだと思います。他の人が述べたように

はまた、あなたは終了引用符が欠落している、スペース

id="Var' + counter + 'value="%Var' + counter + '%" 

は次のようになります。

id="Var' + counter + '" value="%Var' + counter + '%" 

Answer 2

は、私はあなたがちょうどあなたの新しい入力のIDと値の間"を欠落していたと思います

//Adds another row to the above table. 
 
var counter = 3; 
 
jQuery('a.add-cond').click(function(event) { 
 
    event.preventDefault(); 
 
    if (counter < 10) { 
 
    counter++; 
 
    var newRow = jQuery('<tr><td><b><center>' + "Long term condition " + counter + ":" + '</center></td> <td><center><input type="text" name="Var' + 
 
     counter + '" id="Var' + counter + '" value="%Var' + counter + '%"/></center></b></td></tr>'); 
 
    jQuery('table.Long-Term-Conditions').append(newRow); 
 
    } else { 
 
    document.getElementById("add-cond").style.visibility = "hidden"; 
 
    document.getElementById("Message").innerHTML = '<font color="Red">Please contact us </font>'; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table style="width:90%" class="Long-Term-Conditions"> 
 
    <center> 
 
    <tr> 
 
     <td><b><center>Long term condition 1:</center></b></td> 
 
     <td> 
 
     <center><input type='text' id="Var1" name='Var1' value='%Var1%' /></center> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td><b><center>Long term condition 2:</center></b></td> 
 
     <td> 
 
     <center><input type='text' id="Var2" name='Var2' value='%Var2%' /></center> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td><b><center>Long term condition 3:</center></b></td> 
 
     <td> 
 
     <center><input type='text' id="Var3" name='Var3' value='%Var3%' /></center> 
 
     </td> 
 
    </tr> 
 
    </center> 
 
</table> 
 
<a href="#" title="" class="add-cond" id="add-cond">Add another long-term health condition</a> 
 
<div id="Message"></div>