0

我想要以下内容：底部有一个文本框（标签调查 Qs）、一个按钮（添加选项）、单选框+文本按钮（添加按钮）。当我单击添加按钮时，正在创建新的 div（如 Survey2）。当我单击添加选项（第一个）时，将创建新的单选 + 文本框。

但是，当我单击添加选择（第二个）时，未创建单选+文本框。原因可能是当我们创建新对象时处理程序没有关联。但是我无法将 live() 方法放到代码中来做到这一点。

我是新手。请帮忙。提前致谢。

请找到我的代码：

<html>
<head>
<title>jQuery add / remove textbox example</title>

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

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

</head>

<body>

<h1>jQuery add / remove textbox example</h1>

<script type="text/javascript">

$(document).ready(function(){

    var counter = 2;
    var choiceCounter=2;

    $("#addButton").click(function () {
    //$("#addButton").live("click",function () {
    //alert("Inside Click FUnction");
    choiceCounter=0;
    if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
    }   

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

    newTextBoxDiv.after('<label>Survey Question '+ counter + ' : </label>' + '<input type="text" name="textbox' + counter +  '" id="textbox' + counter + '" value="" >');

    newTextBoxDiv.append('<label>Survey Question ' + counter + ' : </label>' + '<input type="text" name="textbox'  + counter + '" id="textbox' + counter + '" value="" /> <input type="button" value="Add Choice" id="addOption"> </br><input type="radio"> <input type="textbox" id="option1" ></br>');           
  $('#TextBoxesGroup').append(newTextBoxDiv);  


    newTextBoxDiv.appendTo("#TextBoxesGroup");


    counter++;
     });


     $("#addOption").click(function () {   // the new Add Method
    alert("Inside Option Function");
    if(choiceCounter>10){
            alert("Only 10 textboxes allow");
            return false;
    }   

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

    newTextBoxDiv.after( '<br><input type="radio"> <input type="text" name="textbox' + choiceCounter + '" id="option' + choiceCounter + '" value="Insert your choice" >');


    newTextBoxDiv.append( '<br><input type="radio"> <input type="text" name="textbox' + choiceCounter + '" id="option' + choiceCounter + '" value="Insert your choice" />');           
        $('#TextBoxesGroup').append(newTextBoxDiv);  

    newTextBoxDiv.appendTo("#TextBoxesGroup");

    choiceCounter++;
     });





     $("#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">

        <label>Survey Question 1: </label><input type='textbox' id='textbox1' >  <input type="button" value='Add Choice' id="addOption">
        <br><input type="radio"> <input type='textbox' id='option1' ><br>   

    </div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>

</body>
</html>
4

1 回答 1

0

尝试委托事件：

$("#TextBoxesGroup").on("click", "#addOption", function () { 
  // your code
}):

或者你可以试试

$("#TextBoxesGroup").delegate("#addOption", "click", function () { 
   // your code
}):

一个小笔记

.on()用于普通绑定，如

$(target).on(eventName, handlerFunction)

但是对于委托事件（又名现场）将使用类似

$(container).on(eventName, target, handlerFunction)

这里container指向target在页面加载时属于 DOM 的持有者。container并且target将是任何有效的jQuery 选择器。

于 2012-06-05T16:32:01.967 回答