добавление Div JQuery

0

Я пытаюсь добавить новое #questionfield в существующее #questionfield div #questionfield когда пользователь нажимает кнопку с id #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>
  • 4
    Идентификаторы должны быть уникальными. Помимо этого используйте кавычки правильно
  • 0
    иногда это позволит вам сделать это, но тогда вы получите странные результаты при попытке работать с ними.
Показать ещё 3 комментария
Теги:

5 ответов

3
Лучший ответ

Вам нужно изменить синтаксис append.

  $("#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>
Поделиться
  • 0
    Спасибо! к сожалению, в данный момент он не #questionfield . Он добавляет его в нужное место, но ничего не добавляет
  • 0
    Это только часть проблемы. Это не сработает, если вы просто исправите это.
Показать ещё 6 комментариев
1

Поскольку id должен быть уникальным, вы можете использовать класс. Кроме того, вам также необходимо правильно применять котировки и двойные кавычки:

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

Кроме того, я не уверен, почему вы помещаете <script></script> внутри <a></a>. Вы должны поместить скрипты в конце своей страницы перед тем, как закрыть </body> особенно когда вы не завершаете свой код jQuery внутри готового обработчика DOM $(function(){...});

Поделиться
0

Измените эту часть...

<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>, а это означает, что ссылка не существовала в то время, когда скрипт пытался ссылаться на нее.

Поделиться
0

Как бы то ни было, вы закрываете кавычки, когда пытаетесь установить идентификатор элемента. Чтобы исправить это, вы можете либо избежать кавычек в элементе, как:

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

или использовать одинарные кавычки для строки (или значения id):

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

Кроме того, ваши идентификаторы элементов должны быть уникальными, поэтому вам следует изменить идентификатор на класс <div class="questionfield"></div> или установить уникальный идентификатор для каждого элемента (что было бы, по-моему, более хлопотным).

Поделиться
0

Во-первых, вы использовали неправильную комбинацию кавычек при добавлении. (Вы найдете ошибку в консоли для того же самого)

Во-вторых, использование повторяющихся идентификаторов - это плохая практика.

В-третьих, убедитесь, что вы запишете код в DOM:

$(document).ready(function(){
   $("#add").click(function(){
      $("#questionfield").append("<div id='questionfield'></div>");
   });
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню