Блог

Главная - Вопросы по программированию - onclick не работает при первом щелчке, но отлично работает после первого щелчка

onclick не работает при первом щелчке, но отлично работает после первого щелчка

#html #jquery

#HTML #jquery

Вопрос:

когда страница загружается, кнопка on click не работает в первый раз, но затем она работает нормально, она отлично работает в vs code без onClick (), но в 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">amp;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">amp;times;</span>
  <!-- Modal content -->
  <img class="modal-content" id="modal-image">
</div>

Комментарии:

1. Я сделал вам фрагмент. Пожалуйста, отредактируйте его и добавьте соответствующие HTML и CSS

Ответ №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">amp;times;</span>
  <!-- Modal content -->
  <img class="modal-content" id="modal-image">
</div>

Комментарии:

1. пожалуйста, посмотрите приведенный выше код, который я отредактировал. Спасибо.

2. У меня не хватало = я обновил свой код, чтобы соответствовать вашему классу

3. работает идеально в коде Visual Studio, но та же проблема не работает в Visual Studio

4. если я добавлю onClick(), то он будет работать в Visual Studio, но при втором щелчке..

5. Я изменил $('.container').on('click', '.image', function() { , но я предполагаю, что это СТАТИЧЕСКИЙ контейнер