将html附加到另一个DIV后丢失jQuery效果，

我有一个div inside它具有图像轮播，并且我想将它附加到另一个DIV outside。但是，我在新的div outside上丢失了轮播。我怎样才能为附加的div启用轮播？将html附加到另一个DIV后丢失jQuery效果，

在线样本：http://jsfiddle.net/PYQXa/

<div class="inside"> 
    <ul class="slider"> 
     <li> 
     <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image --> 
     </li> 
     <li> 
     <img src="http://lorempixel.com/580/250/nature/2"> <!-- random image --> 
     </li> 
     <li> 
     <img src="http://lorempixel.com/580/250/nature/3"> <!-- random image --> 
     </li> 
     <li> 
     <img src="http://lorempixel.com/580/250/nature/4"> <!-- random image --> 
     </li> 
    </ul> 
</div> 

<div class="outside"> 
      <!-- append content here --> 
</div>

jQuery的

var $inside = $('.inside'); 
$inside.hide(); 
var appendcontent = $inside.find('.slider').html(); 
$(appendcontent).appendTo($('.outside')); 

// settings 
var $slider = $('.slider'); // class or id of carousel slider 
var $slide = 'li'; // could also use 'img' if you're not using a ul 
var $transition_time = 1000; // 1 second 
var $time_between_slides = 2000; // 4 seconds 

function slides(){ 
    return $slider.find($slide); 
} 

slides().fadeOut(); 

// set active classes 
slides().first().addClass('active'); 
slides().first().fadeIn($transition_time); 

// auto scroll 
$interval = setInterval(
    function(){ 
     var $i = $slider.find($slide + '.active').index(); 

     slides().eq($i).removeClass('active'); 
     slides().eq($i).fadeOut($transition_time); 

     if (slides().length == $i + 1) $i = -1; // loop to start 

     slides().eq($i + 1).fadeIn($transition_time); 
     slides().eq($i + 1).addClass('active'); 
    } 
    , $transition_time + $time_between_slides 
);

这将是工作的罚款，如果你删除

var $inside = $('.inside'); 
$inside.hide(); 
var appendcontent = $inside.find('.slider').html(); 
$(appendcontent).appendTo($('.outside'));

来源

2014-03-07 olo

var appendcontent = $inside.find('.slider').html();

的html()方法返回的jQuery元素的innerHTML替换线

$inside.find('.slider').html();

。在你的例子中，它是一个<li>节点的列表。只需更换行：

var appendcontent = $inside.find('.slider');

来源

2014-03-07 02:37:35

编辑：我再次检查了小提琴，你只在ne中附加'li' w div。有它正常工作，你应该使用

$inside.find('.slider');

来源

2014-03-07 02:28:08 jjaulimsing

感谢您的答案，实际上，我将需要附加一些幻灯片动态其他股利divs。所以，我想知道是否可以启用滑块工作，如果我将它们追加到另一个div。 :-) – olo

我再次检查你的小提琴，我必须更新我的答案。出了什么问题是你采用滑块的html而不是滑块本身。而不是使用$ inside.find（'。slider'）。html（）来代替$ inside.find（'。slider'）; – jjaulimsing

你是在加入滑块类内容到课外但..ü需要在里面外面的div内容添加其他关系滑块类的所有动画会消失。。

var appendcontent = $inside.find('.slider').html(); 
    var html = $inside.html(); 
    $(html).appendTo($('.outside'));

和滑块需要选择这样

var $slider = $('.outside .slider'); // class or id of carousel slider

DEMO

来源

2014-03-07 02:35:06 Neha

因为appentcontent没有类“滑块”。您shold与

$inside.find('.slider').parent().html();

来源

2014-03-07 02:36:16

将html附加到另一个DIV后丢失jQuery效果，

回答

相关问题