Блог

Главная - Вопросы по программированию - Как включить динамически создаваемые элементы в плагине jquery для получения свойств по умолчанию

Как включить динамически создаваемые элементы в плагине jquery для получения свойств по умолчанию

#javascript #jquery #object #plugins

#javascript #jquery #объект #Плагины

Вопрос:

Ниже приведен плагин списка дел jQuery. Добавление текста и нажатие кнопки добавить запускает функцию jQuery для добавления элемента списка в контейнер UL. Я хочу, чтобы каждый элемент списка получал свойства по умолчанию, перечисленные в методе extend, а также настраивался путем принятия опций. Это то, что у меня есть на данный момент (см. Ниже). Как я могу настроить плагин так, чтобы элементы списка получали свойства и опции? В настоящее время это не работает. Пожалуйста, помогите! Большое спасибо!

 HTML

   <div id='to-do-container'>
     <h1>My To-Do List</h1>
     <input type="text" placeholder="New item" />
     <button id="add">Add</button>
   </div>

   <ul id="mylist"></ul>

   <script>
     $(document).ready(function() {
       $("li").newPost();
     });
   </script>

  
 jQuery

(function ( $ ) {
  $.fn.newPost = function( options ) {

    $(function() {
      $("#add").on("click", function() {
        var val = $("input").val();
        if(val !== '') {
         var elem = $("<li></li>").text(val);
         $(elem).append("<button class='rem'>X</button>");
         $("#mylist").append(elem);
         $("input").val("");
         $(".rem").on("click", function() {
          $(this).parent().remove();
         });
        }
      });
    });

   var settings = $.extend({
       color: "red",
       background: "yellow"
   }, options );

   return this.css({
       color: settings.color,
       background: settings.background
   });
  };
}( jQuery ));

Комментарии:

1. Вам нужно инициализировать плагин для каждого нового <li> при его создании. Инициализация при загрузке страницы будет работать только с любыми существующими элементами

2. Как мне это сделать?

3. Переместите весь $('#add').on блок загрузки на страницу, а затем попробуйте var elem = $("<li></li>").text(val).newPost(options)

4. Не могли бы вы, возможно, перенастроить мой код и показать мне, как это выглядит? Когда вы говорите переместить $ (‘#add’).on в блок загрузки страницы, вы имеете в виду переместить это на сторону HTML?

5. Внутри $(document).ready(... вот что я имею в виду. Обратите внимание, что $(function(){ внутренний плагин такой же, как document.ready, но плагин не будет вызываться, пока не появятся элементы, которым это нужно, и будет вызываться слишком часто для кнопки добавить