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>

Image of the question and choice

Answer 1

$(".QuestionOption").on仅在页面加载时运行一次。它使用nb在启动时具有的任何值（4，通过它的外观）为匹配p.last"+nb的元素添加一个监听器。该活动永远不会附加到任何后续创建的元素，因为它们不匹配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

}

如何在动态控制器中创建动态事件

1 个答案: