Не могу применить метод к динамически созданному элементу

247

18 мая 2018, 09:30

Имеется определённый список:

<ul id="products">
        <li class="product">Андрей</li>
        <li class="product">Николай</li>
        <li class="product">Саша</li>
        <li class="product">Ярик</li>
    </ul>

И форма, которая добавляет элементы в этот список:

<form action="#">
    <input type="text" id="dataProduct">
    <button onclick="addProduct()" type="submit">submit</button>
</form>

Проблема в том, что я создаю элементы .product по нажатию на button. И эти созданные элементы не возможно потом найти используя метод .eq(), будто у них нет индекса, а индексы есть только у тех четырёх пунктов li, которые изначально есть в DOM html.

Вставка элемента происходит так:

$(".product").eq(index).before("<li сlass='product'>" + product + "</li>");

Answer 1

Попробуй создать элемент перед вставкой и все будет работать

$(function() { 
 
  var Products = (function() { 
    var self = this; 
 
 
    this.init = function() { 
      this.add(); 
      this.show(); 
    }; 
 
    this.add = function() { 
      $('button').on('click', function(e) { 
        e.preventDefault(); 
        var liElem = $('<li></li>', { 
          class: 'product', 
          text: $('#dataProduct').val(), 
        }); 
        $(".product").eq(2).before(liElem); 
      }); 
    }; 
 
    this.show = function() { 
      $('.show').on('click', function() { 
        $.each($('.product'), function(i, v) { 
          $('.result').append('<p>' + 'ТЕГ li' + ' : ' + $(v).text() + '</p>'); 
        }); 
      }); 
    }; 
 
    self.init(); 
  }()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul id="products"> 
  <li class="product">Андрей</li> 
  <li class="product">Николай</li> 
  <li class="product">Саша</li> 
  <li class="product">Ярик</li> 
</ul> 
 
<form action="#"> 
 
  <input type="text" id="dataProduct"> 
  <button onclick="" type="submit">submit</button> 
</form> 
 
<input type="button" class='show' value="print"> 
 
<div class="result"> 
 
</div>