jQuery: использование виджета после добавления HTML - PullRequest
Новая
       7

jQuery: использование виджета после добавления HTML

1 голос
/ 11 марта 2012

У меня есть динамическая страница, на которой я создаю некоторые элементы (HTML-входы) на основе некоторых конфигураций базы данных.

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

После добавления этих элементов управления, имеющих div и использования .append, мне нужно использовать виджет для некоторых вновь созданных элементов SELECT (какнайдено в jQuery UI Multiple Select Widget ).

Дело в том, что это не сработает.

Я также сделал этот тест:

  • Поместите элемент SELECT на HTML-страницу (прямо в html, а не динамически, как я пытаюсь).
  • Если я запускаю виджет в функции $(document).ready, он запускается нормально и становитсявозможность выбора.
  • Комментируя вышеупомянутую функцию, если я только запускаю виджет по нажатию кнопки, SELECT не станет множественным выбором.

Можете ли вы, пожалуйста, помочь мне?Это из-за DOM?Вот фрагмент этого «движка»: http://jsfiddle.net/SWyw9/

Ответы [ 2 ]

2 голосов
/ 18 марта 2013

Слишком поздно отвечать, но я подумал, что этот ответ может помочь будущим дизайнерам / разработчикам. Мы знаем, что в jquery есть функция делегата () для привязки обработчиков событий к динамически добавляемым элементам.

Я чувствую, что эта функция делегата () может быть использована в вашем случае.
Проверьте следующий фрагмент кода. 

// Here you are using delegate to attach mouse over event handler to the existing elements as well as elements which will be added dynamically in future.
$('#myContainer').delegate('.myDraggableClass', 'mouseenter', function() {

  var $this = $(this);
  // Checking whether or not the widget is applied to the element.
  if(!$this.is(':data(draggable)')) {

    // As widget is not applied, applying it.
    $this.draggable({ /* configure draggable here */  });
  }
});

Фрагмент кода скопирован из приведенной ниже ссылки. Проверьте для более подробной информации: http://enterprisejquery.com/2010/07/configuring-ui-widgets-and-interactions-with-live/

1 голос
/ 11 марта 2012

Я не уверен, что именно вы спрашиваете.

Похоже, это проблема обязательна. Вы не можете привязать события к несуществующим элементам (динамическим элементам), если не используете bind (), который был объявлен устаревшим, или новое значение «on». 

$("#body-id").on("click", ".widget-button", function(event){
    //do something
});

Прикрепляет нажатие кнопки к тегу body с идентификатором body-id. Затем тело прослушивает будущие нажатия кнопок виджета, поскольку тело существует в состоянии готовности, а динамический виджет - нет.

Не уверен, если это то, что вы спрашиваете.

ОК, я раздвоил твою скрипку: http://jsfiddle.net/TheFiddler/USHc5/4/

Это то, что вы ищете?

1) Создать массив типов 2) Передайте это BuildHTML 3) Выложить реквизит 4) Переключите случай для каждого 5) Отобразить новый HTML

...