onclick 在第一次点击时不起作用，但在第一次点击后工作正常

Question

当页面加载时第一次点击不能正常工作，但后来它工作正常，它在没有 onClick() 的 vs 代码中运行完美，但在 Visual Studio 中，没有 onClick() 它不能运行，它像这样运行.. 请有人指导我解决这个问题谢谢..

<script>
    function GetProductsRowHtmlSlider(product, div) {
        $(div).append($('<div class="column"><div class="container" style="width: 320px; margin-bottom: 10px;"><div class="pic_container"><img src=' + product.imgSrc + ' data-highres=' + product.imgSrc + ' class="image" style="width: 100%; height: auto; padding: 20px;"></div><h3 class="productName" style="padding: 0px !important; margin: 0px !important; overflow-wrap: break-word;">' + product.Title + '</h3><p class="productDisc" style="padding: 0px !important; margin: 0px !important; overflow-wrap: break-word;">' + product.ItemPrice + '</p></div><div id = "myModal" class="modal"><span id="close_model" class="close">&times;</span><img class="modal-content" id="modal-image"></div></div>'))
    }
</script>

function myFunction() {
  var images = document.querySelectorAll(".image");
  var len = images.length;
  for (var i = 0; i < len; i++) {
    images[i].addEventListener("click", openModal);
  }
  var modal = document.getElementById("myModal");

  var modalImg = document.getElementById("modal-image");

  function openModal() {
    modal.style.display = "block";
    modalImg.src = this.getAttribute("data-highres");
  }

  var span2 = document.getElementById("close_model");
  span2.onclick = function () {
    modal.style.display = "none";
  };

  window.openModal = function (images) {
    modal.style.display = "block";
    modalImg.src = images.getAttribute("data-highres");
  };
}

<div class="container" style="width: 320px; height: 530px;">
          <div class="pic_container" onclick="myFunction()">
            <img src="https://i.pinimg.com/originals/de/a5/f1/dea5f10ecf2080ea8e5312ff9fa0db56.jpg" 
data-highres="https://i.pinimg.com/originals/de/a5/f1/dea5f10ecf2080ea8e5312ff9fa0db56.jpg" class="image" style="width: 100%; height: auto;">
          </div>
          <h3 class="productName" style="padding: 0px !important; margin: 0px !important;">T-Shirt</h3>
          <p class="productDisc" style="padding: 0px !important; margin: 0px !important;">Threadbare is currently sold in the UK, across Europe, Canada and America</p>
        </div>
        
        <div id="myModal" class="modal">
  <!-- Close button -->
  <span id="close_model"class="close">&times;</span>
  <!-- Modal content -->
  <img class="modal-content" id="modal-image">
</div>

Answer 1

这样会更好。如果您有 jQuery，请使用它。

我删除了内联 onclick

$(function() {
  const $modal = $('#myModal');
  const $modalImage = $('#modal-image');
  $('.container').on('click', '.image', function() { // assuming .container is STATIC!
    $modalImage.attr('src', $(this).data('highres'));
    $modal.show();
  })
  $('#close_model').on('click', function() {
    $modal.hide();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" style="width: 320px; height: 530px;">
  <div class="pic_container">
    <img src="https://i.pinimg.com/originals/de/a5/f1/dea5f10ecf2080ea8e5312ff9fa0db56.jpg" data-highres="https://i.pinimg.com/originals/de/a5/f1/dea5f10ecf2080ea8e5312ff9fa0db56.jpg" class="image" style="width: 100%; height: auto;">
  </div>
  <h3 class="productName" style="padding: 0px !important; margin: 0px !important;">T-Shirt</h3>
  <p class="productDisc" style="padding: 0px !important; margin: 0px !important;">Threadbare is currently sold in the UK, across Europe, Canada and America</p>
</div>

<div id="myModal" class="modal">
  <!-- Close button -->
  <span id="close_model" class="close">&times;</span>
  <!-- Modal content -->
  <img class="modal-content" id="modal-image">
</div>