Question

这段代码有什么问题？只有第一个添加和删除链接正在运行...

<html>
<head>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
 div{
  padding:8px;
 }
</style>

</head>

<body>


<script type="text/javascript">

$(document).ready(function(){

    var counter = 2;

    $(".addButton").click(function () {

 if(counter>5){
            alert("Only 5 textboxes allow");
            return false;
 }   

 var newTextBoxDiv = $(document.createElement('div'))
      .attr("id", 'TextBoxDiv' + counter);

 newTextBoxDiv.html('<TABLE><TR><TD>' +
'<input type="text" name="textbox' + counter + 
'" id="textbox' + counter + '" value="" ></TD><TD><input type="text" name="textbox' + counter + 
'" id="textbox' + counter + '" value="" ></TD>&nbsp;<TD><a href="#" value="addButton" class="addButton">Add</a>&nbsp;<a href="#" value="removeButton" class="removeButton">Remove</a></TD></TR></TABLE>');

 newTextBoxDiv.appendTo("#TextBoxesGroup");


 counter++;
     });

     $(".removeButton").click(function () {
 if(counter==1){
          alert("No more textbox to remove");
          return false;
       }   

 counter--;

        $("#TextBoxDiv" + counter).remove();

     });

     $("#getButtonValue").click(function () {

 var msg = '';
 for(i=1; i<counter; i++){
      msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
 }
       alert(msg);
     });
  });
</script>
</head><body>

<div id='TextBoxesGroup'>
 <div id="TextBoxDiv1">
  <TR><TD><input type='textbox' id='textbox1' ></TD>&nbsp;<TD><input type="text" name="textbox' + counter + 
'" id="textbox' + counter + '" value="" ></TD>&nbsp;<TD><a href="#" value="addButton" class="addButton">Add</a>&nbsp;<a href="#" value="removeButton" class="removeButton">Remove</a></TD></TR>
 </div>
</div>

</body>
</html>

Answer 1

绑定 click（）处理程序时，页面上只有一个Add链接要绑定。使用live()捕获页面上尚未包含的元素的点击事件：

$(".addButton").live("click", function () {

工作演示：http://jsfiddle.net/u9hvp/

Answer 2

live（）的使用已被折旧，并且自Andy E发布以来已被删除。现在使用以下语法支持相同的功能：

$（document）.on（“click”，“。removeButton”，function（）{

Answer 3

您只需将此文件添加到您的文件夹中即可正常工作......！

<强>的jquery-1.3.2.min.js

使用jquery动态添加文本框

3 个答案: