Question

HTML中有多个图像。

<ul class="ice-navigator">
<li>
    <a  href="javascript:void(0);" class="thumb" id = "26"> 
        <img src="images/123.png" alt="Title #0" width="75" height="75"/>
    </a>
</li>

<li>
    <a href="javascript:void(0);" class="thumb" id = "28">
        <img src="images/456.png" alt="Title #0" width="75" height="75"/>
    </a>

</li>
.
.
.

</ul>

我想一次只显示5张图片，所以我使用此代码“onload”隐藏图片，如果它超过5张。

stPt = 0, elToShow = 5; //showing 5 elements
$ul = $('ul.ice-navigator');

    $li = $('ul.ice-navigator li'); //get the list of li's
$copy_li = [];
copy_lgt = $li.length - elToShow;

for (var i = elToShow; i < $li.length; i++) 
{
  var tmp;
  tmp = $li.eq(i);
  $copy_li.push(tmp.clone());
  tmp.remove();
}

要显示上一个和下一个，我正在使用此代码。

$('.ice-next').click (function () 
{
    $li = $('ul.ice-navigator li'); //get the list of li's
    $copy_li.splice(copy_lgt, 0, $li.eq(0).clone() ); //move the 1st element clone to the last position in copy_li
    $li.eq(0).remove(); //kill the 1st element in the UL
    $ul.append($copy_li.shift()); //add to the last
});

$('.ice-previous').click (function () 
{
    $li = $('ul.ice-navigator li'); //get the list of li's
    $copy_li.splice(0, 0, $li.eq(elToShow-1).clone()); //move the 1st element clone to the last position in copy_li
    $li.eq(elToShow-1).remove();//kill the 1st element in the UL
    $ul.prepend($copy_li.pop());//add to the last

});

一切正常，除此之外：

有一个与拇指类相关联的点击事件。

jQuery(document).ready(function($) {
$(".thumb").click(function(){
    alert ("Reaching here");
)};
)}:

这是在开始工作。但是一旦我们使用了

$('.ice-previous').click (function () or $('.ice-next').click (function ()

然后 $（“。thumb”）。click（function（）{无效。

我的意思是现在点击图片将无法打印到达此处。

是什么导致了这个问题？

Answer 1

因为您正在删除并重新附加DOM元素，所以您需要将事件委托给这些元素，如下所示：

$('.ice-navigator').on('click', '.thumb', function() {
    alert('Reaching here');
});

更多信息：http://api.jquery.com/on/

问题是克隆，拼接，删除，追加jquery函数

1 个答案: