Jquery .clone () работает только один раз - PullRequest
Новая
       29

Jquery .clone () работает только один раз

0 голосов
/ 27 сентября 2019

Я создаю приложение для упорядочения меню, в котором мне нужно использовать Jquery.

Я использую метод clone(), чтобы дублировать элементы корзины с необходимыми данными, извлеченными. Это работает один раз, а затемжурналы и пустые object с <prototype>.

. Клонирование - это раздел в моем HTML, который я использую в качестве шаблона с id, чтобы скрыть его.Я удаляю это на клонированных элементах.

Извлечение данных, которые я исключил, поскольку они работают нормально, а функции находятся в других файлах, но я открыт для идеи их причины.

HTML: 

        <div class="cart-item" id="cartitem-template">

          <div class="left">
            <div class="image"></div>
            <div class="price"></div>
          </div>

          <div class="mid">
            <div class="name">

            </div>
            <div class="stars">
              <span></span>
            </div>
            <div class="underline"></div>
            <div class="toggleReviews">
              <span></span>
            </div>
          </div>

          <div class="right">
            <div class="remove-cart-item">✕</div>
          </div>

        </div>

      </div>

Функция JS: 

    buildCartItem = function(menuItem) {
        const template = $("#cartitem-template")

        template
            .removeAttr("id")
            .clone(false)

        const newCartItem = template
        newCartItem.insertAfter(".cart-item")
        console.log(newCartItem)

        //Get object and index atts from clicked menu item
        //Also set that same data into the dom of the cart item
        //As well as set that data to local storage

        ...

        // Apply data to the cloned cart item template
        newCartItem.find(".image").css("background-image", "url(" + data.image + ")")
        setData(".price", "$"+data.price, newCartItem)
        ...
    }

    $(".menu-item").click(function() {
        buildCartItem($(this))
    })

Я правильно использую .clone()?Честно застрял

Ответы [ 2 ]

1 голос
/ 27 сентября 2019 

var buildCartItem = function(menuItem) {
  const newCartItem = $("#cartitem-template").clone(false).removeAttr("id");

  //newCartItem.find(".image").css("background-image", "url(" + data.image + ")");  
  //setData(".price", "$" + data.price, newCartItem);

  newCartItem.insertAfter("#cartitem-template");
}

$(".menu-item").click(function() {
  buildCartItem($(this))
})
#cartitem-template {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="cart-item" id="cartitem-template">
  <div class="left">
    <div class="image">image</div>
    <div class="price">price</div>
  </div>
  <div class="mid">
    <div class="name">name
    </div>
    <div class="stars">
      <span>0</span>
    </div>
    <div class="underline"></div>
    <div class="toggleReviews">
      <span></span>
    </div>
  </div>
  <div class="right">
    <div class="remove-cart-item">✕</div>
  </div>
</div>

<button class="menu-item">Clone</button>
1 голос
/ 27 сентября 2019

Вы удаляете атрибут «id» из исходного элемента еще до клонирования, поэтому в последующих вызовах методов не удалось найти элемент с идентификатором «cartitem-template».Поэтому в вашем методе buildCartItem удалите «id» после клонирования.

const newCartItem = template.clone(false).removeAttr("id");
...