Question

当用户点击ID为#questionfield的按钮时，我正在尝试将新的#questionfield附加到现有的div #add。

<div id="questionfield">
          <div data-role="fieldcontain" data-controltype="textinput">
              <input name="" id="textinput3" placeholder="Enter question here..." value=""
              type="text">
          </div>
          <div data-role="fieldcontain" data-controltype="radiobuttons">
              <fieldset data-role="controlgroup" data-type="vertical" data-mini="true">
                  <legend>
                      Response Type:
                  </legend>
                  <input id="radio1" name="" value="radio1" data-theme="c" type="radio">
                  <label for="radio1">
                      Checkbox
                  </label>
                  <input id="radio2" name="" value="radio2" type="radio">
                  <label for="radio2">
                      Text Input
                  </label>
                  <input id="radio3" name="" value="radio3" type="radio">
                  <label for="radio3">
                      Number Input
                  </label>
              </fieldset>
          </div>
      </div>
      <a data-role="button" id="add">
          Add New Question
          <script>
                $("#add").click(function(){
                    $("#questionfield").append("<div id="questionfield"></div>");
                });
          </script>
      </a>

Answer 1

您需要更改追加语法。

  $("#questionfield").append('<div id="questionfield1"></div>');

修改

<a data-role="button" id="add">Add New Question</a> <script> $("#add").click(function(){ $("#questionfield").append("<div id='questionfield1'></div>"); }); </script>

Answer 2

由于id必须是唯一的，因此您可以使用class。除此之外，您还需要在此处正确应用引号和双引号：

$("#add").click(function(){
    $("#questionfield").append('<div class="questionfield"></div>');
    // --------                ^ use quotes here instead of "    ^
});

此外，我不确定您为何将<script></script>标记放在<a></a>内。您应该在关闭</body>标记之前将脚本放在页面的末尾，特别是当您没有在DOM就绪处理程序$(function(){...});

中包装您的jQuery代码时

Answer 3

首先，你在附加时使用了错误的引号组合。（你会在控制台中找到相同的错误）

其次，使用重复的ID是不好的做法。

第三，确保在DOM准备好的代码中编写代码：

$(document).ready(function(){
   $("#add").click(function(){
      $("#questionfield").append("<div id='questionfield'></div>");
   });
});

Answer 4

实际上，当您尝试设置元素的ID时，您将关闭引号。要解决此问题，您可以转义元素中的引号，如：

$("#add").click(function(){ $("#questionfield").append("<div id=\"questionfield\"></div>"); });

或使用单引号作为字符串（或id值）：

$("#add").click(function(){ $("#questionfield").append('<div id="questionfield"></div>'); });

此外，您的元素ID应该是唯一的，因此您应该将ID更改为类<div class="questionfield"></div>或为每个元素设置唯一ID（在我看来，这样做会更麻烦）。

Answer 5

更改此部分......

<a data-role="button" id="add">
    Add New Question
    <script>
        $("#add").click(function(){
            $("#questionfield").append("<div id="questionfield"></div>");
        });
    </script>
</a>

到此......

<a data-role="button" id="add">Add New Question</a>
<script>
    $("#add").click(function(){
        $("#questionfield").append("<div id='questionfield'></div>");
    });
</script>

在脚本之后你有</a> ，这意味着在脚本尝试引用它时链接不存在。

附加div jquery

5 个答案: