jQuery получить динамический c вложенный элемент для вызова метода animate

Question

Я динамически добавляю данные в div, нажимая кнопку под названием view.

Это работает нормально, однако я решил сделать еще один шаг и добавить еще один вложенный динамический c элемент.

Я могу сделать звонок просто из динамического c дел. Проблема, с которой я сталкиваюсь сейчас, заключается в том, что когда я вызываю Dynami c DIV, чтобы расширить все виды, он расширяет только один; это не будет расширять любые другие.

Я подтвердил, что мой вызов правильный, добавив var d = Date() и вызвав миллисекунды в качестве значения данных.

Я провел поиск и нашел методы parents() и find(). Я могу найти div, но он по-прежнему вызывает только один.

Я динамически добавил 100 делений, и он по-прежнему вызывает только самый новый. Я также попробовал другой on () с изменением размера и другими вызванными событиями.

Что мне здесь не хватает?

$("#view").click(function() {
  var d = new Date();
  $("#dynamic-div-post").prepend('<div class="dynamic-div" style="width: 100%; background-color: red"><div class="col-6"><button id="btn-view" type="button" data-value="test-view" class="btn btn-outline-dark w-100 border-0 d-none d-sm-block"><img class="" src="/img/like.png" style="height: 18px;">view</button></div></div><div class="row dynamic-div" style="width: 100%; background-color: blue;"><div class="col-6 p-0"><div class="all-views" style="background-color: blue; width: 100%; display: none"></div></div></div>');
});

$("#dynamic-div-post").on('click', "#btn-view", function() {
  //alert($(this).parents('#dynamic-div-post').find('.all-views').css('display'));
  switch ($(this).parents('#dynamic-div-post').find('.all-views').css('display')) {
    case 'none':
      $(this).parents('#dynamic-div-post').find('.all-views').css({
        'border-top': "1px solid rgba(0, 0, 0, 0.2)",
        'display': 'block'
      }).animate({
        "min-height": "150px"
      }, 1000, function() {
        // Animation complete.
      });
      break;
    case 'block':
      $(this).parents('#dynamic-div-post').find('.all-views').animate({
        borderWidth: 0,
        "min-height": "0",
        display: "none"
      }, 1000, function() {
        $(this).parents('#dynamic-div-post').find('.all-views').css({
          'border-top': "none",
          'display': 'none'
        })
      });
      break;
  }
  //$(this).blur();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='dynamic-div-post' class='static-div'>
</div>
<div id='div-view' class='static-div'>
  <button id='view'>view</button>
</div>

Answer 1

Нашел это. Родительский элемент div не был родительским для allViews

1. Измените все элементы Dynami c с идентификатора на класс
2. Дайте родительскому контейнеру класс, который мы можем распознать. Слишком много динамических c -див классов
3. . Вам нужен СЛЕДУЮЩИЙ div для открытия и закрытия.
4. Я упростил анимацию

$("#view").click(function() {
  var d = new Date();
  $("#dynamic-div-post").prepend('<div class="dynamic-div container" style="width: 100%; background-color: red"><div class="col-6"><button  type="button" data-value="test-view" class="btn-view btn btn-outline-dark w-100 border-0 d-none d-sm-block"><img class="" src="https://img.icons8.com/pastel-glyph/2x/facebook-like.png" style="height: 18px;">view</button></div></div><div class="row dynamic-div" style="width: 100%; background-color: blue;"><div class="col-6 p-0"><div class="all-views" style="background-color: yellow; width: 100%;">Here is some text</div></div></div>');
});

$("#dynamic-div-post").on('click', ".btn-view", function() {
  const $allViews = $(this).closest('.container').next().find('.all-views');
  if (!$allViews.is(".open")) {
    $allViews.css({
      'border-top': "1px solid rgba(0, 0, 0, 0.2)",
      'display': 'block'
    }).animate({
      "min-height": "150px"
    }, 1000, function() {
      $allViews.addClass("open")
    });
  } else {
    $allViews.animate({
      "borderWidth": 0,
      "min-height": 0,
      "display": "none"
    },function() { $allViews.removeClass("open") });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='dynamic-div-post' class='static-div'>
</div>
<div id='div-view' class='static-div'>
  <button id='view'>view</button>
</div>