0

私は以下を持ちたい: 下部にテキスト ボックス (ラベル アンケート Qs)、ボタン (選択肢の追加)、ラジオボックス + テキスト ボタン (ボタンの追加) を配置します。[追加] ボタンをクリックすると、新しい div が作成されます (Survey2 のように)。Add Choice(1 つ目) をクリックすると、新しいラジオ + テキスト ボックスが作成されます。

ただし、[選択肢の追加](2 つ目)をクリックすると、ラジオ + テキスト ボックスが作成されません。その理由はおそらく、新しいオブジェクトを作成するときにハンドラーが関連付けられていないためです。しかし、コードに 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)

ここでは、ページ読み込み時に DOM に属するcontainerのホルダーを指します。任意の有効なjQuery セレクターになります。targetcontainertarget

于 2012-06-05T16:32:01.967 に答える