如何在動態控制器中創建動態事件

Question

我正在創建問題時進行小型調查，我有問題文本和問題選擇。

默認情況下，如果我要添加另一個文本框，我要填充三個文本框，我單擊添加按鈕，或者在最后一個文本框中單擊以在他下添加另一個文本框，但是該事件卡在同一文本框中，我只希望最后一個文本框來處理事件，但我不知道想要的代碼是錯誤的：

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代碼：

    <asp:DropDownList ID="dropdown_selector" runat="server"  CssClass="dropdown_selector">

    <asp:ListItem>Radio Button</asp:ListItem>
    <asp:ListItem>Check Box</asp:ListItem>
</asp:DropDownList>
<input id="addButton" type="button" value="Add" />

<input id="removeButton" type="button" value="Remove" />
<div id="QuestionOption" runat="server" class="QuestionOption" ></div>
 <div id="ButtonField" runat="server" class="ButtonField" ></div>

問題和選擇的形象

Answer 1

$(".QuestionOption").on在頁面加載時僅運行一次。 它將在啟動時使用p.last"+nb值（根據其外觀為4）將偵聽器添加到與p.last"+nb匹配的元素上。該事件永遠不會附加到任何隨后創建的元素，因為它們不匹配p.last4 。您需要在創建每個文本框時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

}