jQuery函数不会在首次点击时触发

Question

我有一个用jQuery编写的函数。 它工作正常。 唯一的问题是该功能在首次单击时不会触发。 任何解决方案或想法？

 $(document).ready(function() { $('.swipe-prev').on('click', function() { var prevImg = $('img.active').prev('.result-image-act img'); if (prevImg.length == 0) { prevImg = $('.result-image-act img:last'); } $('img.active').removeClass('active'); prevImg.addClass('active'); }); $('.swipe-next').on('click', function() { var nextImg = $('img.active').next('.result-image-act img'); if (nextImg.length == 0) { nextImg = $('.result-image-act img:first'); } $('img.active').removeClass('active'); nextImg.addClass('active'); }); }); 

 .result-row { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: -moz-inline-stack; display: inline-block; -webkit-box-shadow: 0 0 7px 0 #ddd; -moz-box-shadow: 0 0 7px 0 #ddd; box-shadow: 0 0 7px 0 #ddd; border: 1px solid #ccc; height: 290px; line-height: 1.3em; max-width: 300px; max-height: 290px; margin: 4px 0 12px 8px; overflow: hidden; padding: 0; position: relative; width: 300px; white-space: normal; vertical-align: top; } .result-image-act { -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; background-color: transparent; display: block; height: 225px; position: relative; width: 300px; } .result-image-act img { display: none; } .result-image-act .active { display: block; height: 225px; position: relative; width: 300px; } .embed-result-price { -webkit-border-radius: 5px 0 5px 0; -moz-border-radius: 5px 0 5px 0; border-radius: 5px 0 5px 0; background-color: #FFF; border: 1px solid #ccc; border-left: none; border-top: none; color: #111; display: block; left: 0; padding: 2px 5px; position: absolute; top: 0; } /* swipe styling */ .swipe-wrap-lef { width: 30px; height: 60px; box-sizing: border-box; margin: 0px; padding: 0px; position: absolute; top: 87px; left: 0px; float: left; } .swipe-wrap-rig { width: 30px; height: 60px; box-sizing: border-box; margin: 0px; padding: 0px; position: absolute; top: 87px; right: 0px; float: right; } .swipe-wrap-next {} .swipe-wrap a { text-decoration: none; } .swipe-prev { display: table; background: #fff; opacity: 0.8; width: 30px; height: 60px; /* as the half of the width */ border-top-right-radius: 20px; border-bottom-right-radius: 20px; border: 1px solid #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .swipe-next { display: table; background: #fff; opacity: 0.8; width: 30px; height: 60px; /* as the half of the width */ border-top-left-radius: 20px; border-bottom-left-radius: 20px; border: 1px solid #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .swipe-prev:hover, .swipe-next:hover { background: #fff; opacity: 1; } .swipe-prev p, .swipe-next p { font-size: 30px; color: grey; text-align: center; line-height: 60px; margin: 0px; padding: 0px; display: table-cell; vertical-align: middle; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class="result-row"> <!-- image box --> <a href="#"> <div class="result-image-act"> <img src="1.jpg" alt="image 1" class="active"> <img src="2.jpg" alt="image 2"> <img src="3.jpg" alt="image 3"> <img src="4.jpg" alt="image 4"> <img src="5.jpg" alt="image 5"> <img src="6.jpg" alt="image 6"> <img src="7.jpg" alt="image 7"> <img src="8.jpg" alt="image 8"> <img src="9.jpg" alt="image 9"> <img src="10.jpg" alt="image 10"> </div> <span class="embed-result-price">36.0</span> <div class="swipe-wrap"> <div class="swipe-wrap-lef"> <a href="#"> <div class="swipe-prev"> <p>&lt;</p> </div> </a> </div> <div class="swipe-wrap-rig"> <a href="#"> <div class="swipe-next"> <p>&gt;</p> </div> </a> </div> </div> </a> <p class="result-info"> <span style="color:#ccc" title=""> &#9734; </span> <time class="result-date" datetime="2018-03-05 8:36" title="Mon 05 Mar 08:36:12 PM"> Mar 5</time> <a href="#" data-id="" class="result-title"> T shirt </a> <span class="result-price">36.0</span> <span class="post-hide"><i class="fa fa-trash trash-can" aria- hidden="true"></i> </span> </p> </li> 

Answer 1

尝试使用

$('.swipe-prev').click(function(){});

Answer 2

您需要添加z-index: 20; swipe-next swipe-prev

因为如果您检查html，就可以看到图像位于< >容器的“顶部”。

演示

 $(document).ready(function() { $('.swipe-prev').on('click', function() { var prevImg = $('img.active').prev('.result-image-act img'); if (prevImg.length == 0) { prevImg = $('.result-image-act img:last'); } $('img.active').removeClass('active'); prevImg.addClass('active'); }); $('.swipe-next').on('click', function() { var nextImg = $('img.active').next('.result-image-act img'); if (nextImg.length == 0) { nextImg = $('.result-image-act img:first'); } $('img.active').removeClass('active'); nextImg.addClass('active'); }); }); 

 .result-row { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: -moz-inline-stack; display: inline-block; -webkit-box-shadow: 0 0 7px 0 #ddd; -moz-box-shadow: 0 0 7px 0 #ddd; box-shadow: 0 0 7px 0 #ddd; border: 1px solid #ccc; height: 290px; line-height: 1.3em; max-width: 300px; max-height: 290px; margin: 4px 0 12px 8px; overflow: hidden; padding: 0; position: relative; width: 300px; white-space: normal; vertical-align: top; } .result-image-act { -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; background-color: transparent; display: block; height: 225px; position: relative; width: 300px; } .result-image-act img { display: none; } .result-image-act .active { display: block; height: 225px; position: relative; width: 300px; } .embed-result-price { -webkit-border-radius: 5px 0 5px 0; -moz-border-radius: 5px 0 5px 0; border-radius: 5px 0 5px 0; background-color: #FFF; border: 1px solid #ccc; border-left: none; border-top: none; color: #111; display: block; left: 0; padding: 2px 5px; position: absolute; top: 0; } /* swipe styling */ .swipe-wrap-lef { width: 30px; height: 60px; box-sizing: border-box; margin: 0px; padding: 0px; position: absolute; top: 87px; left: 0px; float: left; z-index: 20; } .swipe-wrap-rig { width: 30px; height: 60px; box-sizing: border-box; margin: 0px; padding: 0px; position: absolute; top: 87px; right: 0px; float: right; z-index: 20; } .swipe-wrap-next {} .swipe-wrap a { text-decoration: none; } .swipe-prev { display: table; background: #fff; opacity: 0.8; width: 30px; height: 60px; /* as the half of the width */ border-top-right-radius: 20px; border-bottom-right-radius: 20px; border: 1px solid #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .swipe-next { display: table; background: #fff; opacity: 0.8; width: 30px; height: 60px; /* as the half of the width */ border-top-left-radius: 20px; border-bottom-left-radius: 20px; border: 1px solid #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .swipe-prev:hover, .swipe-next:hover { background: #fff; opacity: 1; } .swipe-prev p, .swipe-next p { font-size: 30px; color: grey; text-align: center; line-height: 60px; margin: 0px; padding: 0px; display: table-cell; vertical-align: middle; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class="result-row"> <!-- image box --> <a href="#"> <div class="result-image-act"> <img src="https://hunyadi.info.hu/levente/images/stories/boxplus/image3.jpg" alt="1" class="active"> <img src="2.jpg" alt="2"> <img src="https://hunyadi.info.hu/levente/images/stories/boxplus/image3.jpg" alt="3"> <img src="4.jpg" alt="4"> <img src="https://hunyadi.info.hu/levente/images/stories/boxplus/image3.jpg" alt="5"> <img src="6.jpg" alt="6"> <img src="https://hunyadi.info.hu/levente/images/stories/boxplus/image3.jpg" alt="7"> <img src="8.jpg" alt="8"> <img src="https://hunyadi.info.hu/levente/images/stories/boxplus/image3.jpg" alt="9"> <img src="10.jpg" alt="10"> </div> <span class="embed-result-price">36.0</span> <div class="swipe-wrap"> <div class="swipe-wrap-lef"> <a href="#"> <div class="swipe-prev"> <p>&lt;</p> </div> </a> </div> <div class="swipe-wrap-rig"> <a href="#"> <div class="swipe-next"> <p>&gt;</p> </div> </a> </div> </div> </a> <p class="result-info"> <span style="color:#ccc" title=""> &#9734; </span> <time class="result-date" datetime="2018-03-05 8:36" title="Mon 05 Mar 08:36:12 PM"> Mar 5</time> <a href="#" data-id="" class="result-title"> T shirt </a> <span class="result-price">36.0</span> <span class="post-hide"><i class="fa fa-trash trash-can" aria- hidden="true"></i> </span> </p> </li> 

Answer 3

一些事情：

首先，因为您的事件正在进行点击，请删除“ $（document）.ready（function（）{}”），因此无需在其中添加OnReady函数。

其次，我尝试了您的代码，它的工作原理非常完美，唯一的问题可能是Image渲染，渲染可能要花一些时间，这就是您假设它第一次不起作用的原因。

尝试在控制台中为每次单击打印一些内容，您将知道它是否有效。 和我一样：

$(document).ready(function() {
    $('.swipe-prev').on('click', function() {
        console.log("Prev");    // Print "Prev" on click swipe-prev
        var prevImg = $('img.active').prev('.result-image-act img');
        if (prevImg.length == 0) {
          prevImg = $('.result-image-act img:last');
        }
        $('img.active').removeClass('active');
        prevImg.addClass('active');
    });

    $('.swipe-next').on('click', function() {
        console.log("Next");  // Print "Next" on click swipe-next
        var nextImg = $('img.active').next('.result-image-act img');
        if (nextImg.length == 0) {
          nextImg = $('.result-image-act img:first');
        }
        $('img.active').removeClass('active');
        nextImg.addClass('active');
    });
});

谢谢。

Answer 4

正如我在评论中告诉您的那样，您希望在单击事件发生时触发此功能，并且您正在告诉jQuery eventlistener监视文档是否准备就绪（事件准备仅在完全加载文档时发生一次）。 无论如何，它都可以正常工作，但是在第一次单击时，可能根本无法为您加载文档，可能是图像上的延迟加载等。只需删除此事件侦听器即可触发您的功能，无需同时连接两个事件侦听器，因为您只需要一个。

想想，例如，我的互联网连接速度很慢，当文档仍在加载时我看到了第一张图像，为什么我不能单击以查看下一张图像？ 我必须等到文件完全加载才能看到下一个文件？

没有任何意义。

它对我来说是这样的：

  $('.swipe-prev').on('click', function() { var prevImg = $('img.active').prev('.result-image-act img'); if (prevImg.length == 0) { prevImg = $('.result-image-act img:last'); } $('img.active').removeClass('active'); prevImg.addClass('active'); }); $('.swipe-next').on('click', function() { var nextImg = $('img.active').next('.result-image-act img'); if (nextImg.length == 0) { nextImg = $('.result-image-act img:first'); } $('img.active').removeClass('active'); nextImg.addClass('active'); }); 

 .result-row { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: -moz-inline-stack; display: inline-block; -webkit-box-shadow: 0 0 7px 0 #ddd; -moz-box-shadow: 0 0 7px 0 #ddd; box-shadow: 0 0 7px 0 #ddd; border: 1px solid #ccc; height: 290px; line-height: 1.3em; max-width: 300px; max-height: 290px; margin: 4px 0 12px 8px; overflow: hidden; padding: 0; position: relative; width: 300px; white-space: normal; vertical-align: top; } .result-image-act { -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; background-color: transparent; display: block; height: 225px; position: relative; width: 300px; } .result-image-act img { display: none; } .result-image-act .active { display: block; height: 225px; position: relative; width: 300px; } .embed-result-price { -webkit-border-radius: 5px 0 5px 0; -moz-border-radius: 5px 0 5px 0; border-radius: 5px 0 5px 0; background-color: #FFF; border: 1px solid #ccc; border-left: none; border-top: none; color: #111; display: block; left: 0; padding: 2px 5px; position: absolute; top: 0; } /* swipe styling */ .swipe-wrap-lef { width: 30px; height: 60px; box-sizing: border-box; margin: 0px; padding: 0px; position: absolute; top: 87px; left: 0px; float: left; } .swipe-wrap-rig { width: 30px; height: 60px; box-sizing: border-box; margin: 0px; padding: 0px; position: absolute; top: 87px; right: 0px; float: right; } .swipe-wrap-next {} .swipe-wrap a { text-decoration: none; } .swipe-prev { display: table; background: #fff; opacity: 0.8; width: 30px; height: 60px; /* as the half of the width */ border-top-right-radius: 20px; border-bottom-right-radius: 20px; border: 1px solid #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .swipe-next { display: table; background: #fff; opacity: 0.8; width: 30px; height: 60px; /* as the half of the width */ border-top-left-radius: 20px; border-bottom-left-radius: 20px; border: 1px solid #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .swipe-prev:hover, .swipe-next:hover { background: #fff; opacity: 1; } .swipe-prev p, .swipe-next p { font-size: 30px; color: grey; text-align: center; line-height: 60px; margin: 0px; padding: 0px; display: table-cell; vertical-align: middle; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class="result-row"> <!-- image box --> <a href="#"> <div class="result-image-act"> <img src="1.jpg" alt="image 1" class="active"> <img src="2.jpg" alt="image 2"> <img src="3.jpg" alt="image 3"> <img src="4.jpg" alt="image 4"> <img src="5.jpg" alt="image 5"> <img src="6.jpg" alt="image 6"> <img src="7.jpg" alt="image 7"> <img src="8.jpg" alt="image 8"> <img src="9.jpg" alt="image 9"> <img src="10.jpg" alt="image 10"> </div> <span class="embed-result-price">36.0</span> <div class="swipe-wrap"> <div class="swipe-wrap-lef"> <a href="#"> <div class="swipe-prev"> <p>&lt;</p> </div> </a> </div> <div class="swipe-wrap-rig"> <a href="#"> <div class="swipe-next"> <p>&gt;</p> </div> </a> </div> </div> </a> <p class="result-info"> <span style="color:#ccc" title=""> &#9734; </span> <time class="result-date" datetime="2018-03-05 8:36" title="Mon 05 Mar 08:36:12 PM"> Mar 5</time> <a href="#" data-id="" class="result-title"> T shirt </a> <span class="result-price">36.0</span> <span class="post-hide"><i class="fa fa-trash trash-can" aria- hidden="true"></i> </span> </p> </li>