Question

我在Jquery中编写了一些代码，当按下按钮时，会创建一个新变量并将其显示在屏幕上。我想将所有输入的数据存入这个新变量并将其存储在数据库中，但是在我到达那里之前，我必须想办法正确地访问变量信息。

在HTML中我创建了3个文本框和一个按钮，最多可添加7个文本框，总共10个。我的代码看起来像这样（这些存储在数据库中就好了）：

<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>

我现在的问题是我的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

我认为您在新输入的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>

Answer 2

您遇到的问题是，当您将click事件绑定到元素时，它只会绑定到文档中已存在的元素。因此，当您添加新的时，它不会触发该click事件，因为您没有将其绑定到新的。

一个简单的解决方案是将click事件监听器添加到正文中，如下所示：

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

我认为这就是你要找的东西。

也像提到的其他人一样，你错过了一个结束语和一个空格

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

应该是：

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

在Jquery中创建的变量未出现在调试器中

2 个答案: