ダイナミックコントローラでダイナミックイベントを作成する方法

Question

私は質問の作成で小さなアンケートを作成していますが、質問テキストと質問の選択肢があります。

デフォルトでは、別のテキストボックスを追加するには3つのテキストボックスがあります。追加ボタンをクリックするか、最後のテキストボックスに別のテキストボックスを追加しますが、イベントは同じテキストボックスに貼り付けられますイベントを処理するための唯一の最後のテキストボックスが、私はしたいかわからない私のコードで間違っている：

はJQuery：

<script> 

     $(document).ready(function() { 

      $('.dropdown_selector').change(function() { 


       var option = $(this).find('option:selected').val(); 



       if (option == "Radio Button") { 

        $(".QuestionOption").html('<p>Q1:<input id="Text1" type="text" /></p> <p> Answer Choices:</p> <p><input id="Text2" type="text" /></p><p><input id="Text3" type="text" /></p> <p class ="last4"><input id="Text4" type="text" /></p>'); 
        $(".ButtonField").html('<p><input id="Button1" type="button" value="Save" />&nbsp;&nbsp;&nbsp;<input id="Button2" type="button" value="Cancel" /></p><p><input id="Checkbox1" type="checkbox" />Add a Common Field</p>'); 


       } 
       else 
        if (option == "Check Box") { 
         $(".QuestionOption").html('<p>Q1:<input id="Text1" type="text" /></p> <p> Answer Choices:</p> <p><input id="Text2" type="text" /></p><p><input id="Text3" type="text" /></p> <p class ="last4"><input id="Text4" type="text" /></p>'); 
         $(".ButtonField").html('<p><input id="Button1" type="button" value="Save" />&nbsp;&nbsp;&nbsp;<input id="Button2" type="button" value="Cancel" /></p><p><input id="Checkbox1" type="checkbox" />Add a Common Field</p>'); 

        } 
        }); 
     }); 

</script> 


<script> 

    $(document).ready(function() { 

     var counter = 5; 
     var nb = counter - 1; 

     $(".QuestionOption").on("click", "p.last"+nb, function() { 

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

      var newTextBoxDiv = $(document.createElement('p')).attr("class", 'last' + counter); 

      newTextBoxDiv.after().html('<input type="text" id="Text' + counter + '" value="" > '); 

      newTextBoxDiv.appendTo(".QuestionOption"); 


      counter++; 
      nb = counter - 1; 

     }); 

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

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

      var newTextBoxDiv = $(document.createElement('p')).attr("class", 'last' + counter); 

      newTextBoxDiv.after().html('<input type="text" id="Text' + counter + '" value="" > '); 

      newTextBoxDiv.appendTo(".QuestionOption"); 


      counter++; 
     }); 

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

      counter--; 
      $(".last" + counter).remove(); 
      $("#Text"+counter).remove(); 

     }); 


    }); 

HTMLコード：

ページのロードのみ、一度だけ実行されます

Image of the question and choice

Answer 1

$(".QuestionOption").on。起動時にnbがどのような値をとっていてもそれを参照してp.last"+nbと一致する要素にリスナーを追加します（見た目では4）。 p.last4と一致しないため、後で作成された要素にイベントが添付されることはありません。各テキストボックスが作成されるたびにイベントをオンにし、クリックしたばかりのイベントをオフにする必要があります。

var counter = 5; //moved these outside document.ready 
var nb = counter - 1; 

$(document).ready(function() { 
    $(".QuestionOption").on("click", "p.last"+nb, newTextBox); //run newTextBox function when this is triggered 
//... 
}); //end of document.ready function 

//re-usable function to create new textbox 
function newTextBox() 
{ 
     if (counter > 10) { 
      alert("Only 10 textboxes allowed"); //N.B. corrected grammar from "allow" to "allowed" 
      return false; 
     } 

     var newTextBoxDiv = $("<p/>").attr("class", 'last' + counter); 
     newTextBoxDiv.after().html('<input type="text" id="Text' + counter + '" value="" > '); 

     newTextBoxDiv.appendTo(".QuestionOption"); 

     $(".QuestionOption").off("click", "p.last"+nb, newTextBox); //remove event handler for the current textbox (which has just been clicked) 

     counter++; //increment the counter 
     nb = counter - 1; 

     $(".QuestionOption").on("click", "p.last"+nb, newTextBox); //run newTextBox function for the newly added textbox 

}