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

Question

我动态创建了锚标记，它们没有按应有的方式将元素属性发送到购物车。

我创建了一个 javascript 购物车程序，它使用我自己创建的锚点元素运行良好。但是，现在我正在尝试使用动态生成的锚元素列表将这些项目添加到购物车。锚点与我创建的锚点具有相同的属性，但它们不会被发送到购物车。我知道购物车的代码正在运行，因为它的其他方面如 "remove all" 和 "total price" 正在按预期运行。

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

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

});

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

Answer 1

万一其他人遇到这个问题，这里是我找到的答案。

我正在使用 jQuery 和 "click"，目标是我正在创建的动态锚元素。

我认为这是因为我使用了包含 "this" 关键字的函数，影响了我的锚点被识别的能力。要识别您的锚点，请定位您的元素附加到的容器（如果您有嵌套元素，则定位到非动态的下一个父元素）并使用以下 jQuery 代码：

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

在我的例子中，我用上面的代码替换了这段代码并且它工作得很好：

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

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

Why isn't my anchor tag onclick() sending my data properties to cart even though it's firing my alert?

html

javascript

arrays

anchor