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>