Почему мой якорный тег onclick () не отправляет мои свойства данных в корзину, даже если он запускает мое предупреждение? - PullRequest
Новая
       6

Почему мой якорный тег onclick () не отправляет мои свойства данных в корзину, даже если он запускает мое предупреждение?

0 голосов
/ 06 января 2019

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

Я создал программу javascript cart, которая отлично работает с использованием якорных элементов, которые я создал сам. Однако сейчас я пытаюсь использовать список динамически генерируемых якорных элементов, чтобы добавить эти элементы в корзину. Якорь имеет те же свойства, что и созданные мной, но они не отправляются в корзину. Я знаю, что код для корзины работает, потому что другие аспекты, такие как «удалить все» и «общая стоимость», работают как ожидалось.

Когда я console.log регистрирует событие click, я вижу свойства якоря, которые пытаюсь добавить в корзину, и успешно добавленное предупреждение. Я подозреваю, что это может быть связано с тем, как я добавляю свои элементы, но не вижу, где они будут ошибаться. Любая помощь приветствуется! 

<script type="text/javascript">
    $(document).ready(function() {
      $('.slider-for').slick('unslick');
      $('.slider-nav').slick('unslick');
      let bottom = document.getElementById("slider-nav");
      let top = document.getElementById("slider-for");
      let url = 'https://randomuser.me/api/?results=4';
      fetch(url)
        .then(function(resp) {
          // console.log(resp);
          return resp.json();
        })
        .then(function(data) {
          let users = data.results;
          // console.log(data.results);
          users.forEach(function(element) {

            let childDiv1 = document.createElement('div');

            let childDiv2 = document.createElement('div');


            let myImg1 = document.createElement('img');
            myImg1.src = element.picture.large;
            myImg1.dataset.price = element.location.postcode;
            myImg1.dataset.name = element.name.first

            let myImg2 = document.createElement('img');
            myImg2.src = element.picture.medium;


            let myTag = document.createElement('a');
            myTag.href = '#';
            myTag.addEventListener('click', alertFunction);
            myTag.className = 'add';
            myTag.id = 'add';
            myTag.title = 'click to add to cart'
            myTag.dataset.price = element.location.price;
            myTag.dataset.name = element.name.first

            childDiv1.appendChild(myImg1);
            myTag.appendChild(childDiv1);
            let newPics1 = top.appendChild(myTag);
            // console.log(newPics1);

            childDiv2.appendChild(myImg2);
            let newPics2 = bottom.appendChild(childDiv2);


      })
      $('.slick-for').slick('slickAdd');
      $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        asNavFor: '.slider-nav'
      });
      $('.slick-nav').slick('slickAdd');
      $('.slider-nav').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        asNavFor: '.slider-for',
        dots: true,
        centerMode: true,
        focusOnSelect: true
      });

    })
    .catch(function(err) {
      console.log(err);
    })

});

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

1 Ответ

0 голосов
/ 06 января 2019

В случае, если кто-то еще сталкивается с этой проблемой, вот ответ, который я нашел.

Я использовал jQuery с «щелчком», нацеленным на создаваемые мной элементы динамической привязки.

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

$("firstNonDynamicParentElementId").on("click", "a.class", function() {
    'whatever your function does goes here'
};

В моем случае я заменил этот код на приведенный выше, и он отлично работал: 

$(".add").click(function(event) {
    'whatever your function does goes here'
};
...