Jquery динамически создает перетаскиваемые div

В моем проекте я динамически создаю div с помощью jquery каждый раз, когда вы нажимаете кнопку. Теперь я хочу, чтобы эти новые элементы div имели свойства, которые можно перетаскивать и изменять размер. Вот что я сделал до сих пор:

$("#button1").click(function(){
     $("<div/>", {
       "id": "test",
        text: "",
      }).appendTo("body");
     $( "#test" ).resizable();
     $( "#test" ).draggable();
  });

Этот код как-то работает, проблема в том, что только первый созданный div можно изменять и перетаскивать. Также можно ли поставить еще одну кнопку, чтобы удалить эти новые созданные div?


html jquery jquery-ui-draggable dynamically-generated
person man_or_astroman    schedule 25.04.2012    source источник

Ответы (2)


arrow_upward
5
arrow_downward

id должен быть уникальным! вы создаете несколько div с одним и тем же test id => INVALID HTML

Другое дело, вам не нужно запрашивать DOM, вы можете использовать полученную ссылку, чтобы сделать созданные <div> resizable и draggable:

$("#button1").click(function(){
     $("<div/>", {
       "class": "test",
        text: "",
      }).resizable().draggable()
      .appendTo("body");
  });

Если вы хотите использовать id по какой-то причине:

var counter = 1;

$("#button1").click(function(){
     $("<div/>", {
       "class": "test" + (counter++),
        text: "",
      }).resizable().draggable()
      .appendTo("body");
  });

#id комментарий селектора на сайте документации:

Каждое значение идентификатора должно использоваться только один раз в документе. Если более чем одному элементу присвоен один и тот же идентификатор, запросы, использующие этот идентификатор, будут выбирать только первый соответствующий элемент в модели DOM. Однако на это поведение не следует полагаться; документ с более чем одним элементом, использующим один и тот же идентификатор, недействителен.

person gdoron is supporting Monica    schedule 25.04.2012
comment
Спасибо за ответы! Итак, как я могу создать разные идентификаторы для каждого div с помощью одной кнопки? - person man_or_astroman; 25.04.2012
comment
@ счастливчик13. Вы можете использовать переменную для хранения счетчика см. обновление. или просто используйте класс вместо этого. - person gdoron is supporting Monica; 25.04.2012
comment
большое спасибо! теперь все работает! Теперь другой вопрос. Можно ли добавить еще одну кнопку, чтобы удалить все созданные div? - person man_or_astroman; 25.04.2012
comment
@ счастливчик13. Вы должны задать один вопрос в треде, задать его в другом вопросе, и я или кто-то другой с удовольствием вам в этом помогу. - person gdoron is supporting Monica; 25.04.2012

arrow_upward
1
arrow_downward

Вы должны указывать разные идентификаторы для каждого клика или использовать класс с похожим именем.

$("#button1").click(function(){
     $("<div/>", {
       "class": "test",
        text: "",
      }).appendTo("body");
     $( ".test" ).resizable();
     $( ".test" ).draggable();
  });
person Edwin Alex    schedule 25.04.2012