Question

我想拥有以下内容：有一个文本框（Label Survey Qs），一个按钮（Add Choice），radiobox + text 底部的按钮（添加按钮）。当我点击Add Button时，会创建新的div（如Survey2）。当我点击Add Choice（第一个）时，会创建新的收音机+文本框。

但是，当我点击Add Choice（第二个）时，不会创建收音机+文本框。原因可能是我们在创建新对象时没有关联处理程序。但是我无法将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>

Answer 1

尝试使用委托事件：

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

或者你可以尝试

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

一点点说明

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

$(target).on(eventName, handlerFunction)

但是对于委托事件（aka live）将使用像

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

此处container指向页面加载时属于DOM的target持有者。 container和target将是有效的 jQuery selector 。

JQuery在里面添加按钮

1 个答案:

一点点说明