问题在于克隆、拼接、删除、追加 jquery 函数

issue is with clone, splice, remove, append jquery function

本文关键字：追加 jquery 函数 删除 拼接 问题在于      更新时间：2023-09-26

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（）{ 不起作用。

我的意思是现在单击图像不会打印到达这里。

是什么导致了这个问题？？

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

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

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

相关文章：