时间戳

首页 > 解决方案 > 为什么我的锚标记 onclick() 没有将我的数据属性发送到购物车，即使它触发了我的警报？

javascript - 为什么我的锚标记 onclick() 没有将我的数据属性发送到购物车，即使它触发了我的警报？

问题描述

我已经动态创建了锚标签，它们不会将元素属性发送到购物车，因为它们应该是。

我创建了一个 javascript 购物车程序，使用我自己创建的锚元素可以正常工作。但是，现在我尝试使用动态生成的锚元素列表将这些项目添加到购物车。锚点与我创建的锚点具有相同的属性，但它们没有被发送到购物车。我知道购物车的代码可以正常工作，因为它的其他方面（例如“全部删除”和“总价”）正在按预期运行。

当我控制台记录点击事件时，我可以看到我试图添加到购物车的锚点属性，并且我添加到它们的警报成功触发。我怀疑这可能与我添加元素的方式有关，但看不出它们在哪里出错。任何帮助表示赞赏！

<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);
    })

});

我希望单击嵌套在锚标记中的图像并将锚元素属性发送到购物车。我正在单击图像，控制台显示它是正确的图像，但它没有被发送到购物车。

标签： javascripthtmlarraysanchor

解决方案

如果其他人遇到此问题，这是我找到的答案。

我正在使用 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'
};

推荐阅读