javascript - jQuery $(document).on( eventName, 选择器, function(){} ) 不起作用

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 6 年前。

我有一个点击功能，当我在页面加载时隐藏这些元素时，该功能就会起作用，然后稍后显示它们。现在，我在页面加载后单击附加这些元素，该功能当然不起作用。我想我可以用 load() 解决问题功能，但仍然不起作用。这是我在点击时附加的 html:

$('#magazine-detail')[0].innerHTML = '<section id="magazine-detail" class="magazine-detail"><div class="large-6 medium-6 small-12 columns"><div class="magazine-hero"><img id="image" src="/imagecache/cover/' + magazineImage + '" alt="' + name + '" /><div class="magazine-preview-nav"><div class="right-arrow" id="forward"><img src="/img/right-arrow-black.svg" /><p>Neste utgivelse</p></div><div class="left-arrow" id="back"><img src="/img/left-arrow-black.svg" /><p>Forrige utgivelse</p></div></div></div></div><div class="large-6 medium-6 small-12 columns"><div class="row"><div class="small-6 columns magazine-title"><h1 id="name"></h1></div></div><p id="summary"></p><img id="issueImage" src="" alt="" /><p></p><button class="button primary expand">Kjøp abonnement - 1 måned gratis</button><button class="button secondary expand">Bla igjennom arkivet</button></div></section>';

在那里我创建了#forward和#back元素，我在脚本中具有单击功能:

$(document).ready(function () {
    var imagesIndex = 0;
    nextImage = 0;
    loadedImages = new Array();

    function preload() {
        for (i = 0; i < 2; i++) {
            if (nextImage < images.length) {
                var img = new Image();
                img.src = '/imagecache/cover/' + images[nextImage];
                loadedImages[nextImage] = img;
                ++nextImage;
            }
        }
    }

    $('#forward').load('click', function() {
      imagesIndex++;
      preload();

      if (imagesIndex > (loadedImages.length - 1)) {
          imagesIndex = loadedImages.length - 1;
      }

      $('#image').attr({"src" : loadedImages[imagesIndex].src, "alt" : name});
    });

    $('#back').load('click', function() {
        imagesIndex--;

        if (imagesIndex < 0) {
            imagesIndex = 0;
        }

        $('#image').attr({"src" : loadedImages[imagesIndex].src, "alt" : name});
    });
});

我尝试过:

$(document).on('click','#forward', function() {
      console.log('entered');
      imagesIndex++;
      preload();

      if (imagesIndex > (loadedImages.length - 1)) {
          imagesIndex = loadedImages.length - 1;
      }

      $('#image').attr({"src" : loadedImages[imagesIndex].src, "alt" : name});
    });

    $(document).on('click','#forward', function() {
        imagesIndex--;

        if (imagesIndex < 0) {
            imagesIndex = 0;
        }

        $('#image').attr({"src" : loadedImages[imagesIndex].src, "alt" : name});
    });

但是当我单击该元素时，没有任何记录。

Answer 1

$("#existingParent").on("click", ".child", function() {
  // do stuff
});