2011-12-23 4 views
1

jquery 슬라이드 쇼 (slides)에 항목을 추가하려고하는데이를 새로 고치는 방법을 찾을 수 없습니다. 나는이 HTML 코드가 있습니다jquery 슬라이드 쇼에 항목을 동적으로 추가하십시오.

<a class='add' href='#'>add slide</a> 

<div id="slides"> 
    <div class="slides_container">  
      <h1>Slide 1</h1>  
      <h1>Slide 2</h1>  
      <h1>Slide 3</h1>  
      <h1>Slide 4</h1>  
      <h1>Slide 5</h1>  
    </div> 
</div> 

을하고이 JS :

$(function() { 
    $("#slides").slides(); 

    $('.add').live('click', (function() { 
     $('.slides_control').append('<h1>Slide added</h1>'); 
     // note: slides_control div is added by the slides plugin automatically and is the real container of the items. 
     return false; 
    })); 

}); 

fiddle

에 나는 새 데이터를 표시 할 수있는 슬라이드 쇼를 다시로드해야하지만 난 찾을 수 없습니다 데모입니다 그것을하는 방법.

답변

2

슬라이드 (see Github)의 최신 버전 실제로 기능 slides('update')을 가지고 시도하지만, 현재 버전은 아직 없습니다. 생산이를 사용하기 전에 http://jsfiddle.net/R7zvM/

당신은 아마 테스트를해야한다고주의 사항 :

$("#slides").slides(); 

$('.add').on('click', function() { 
    var children = $('#slides .slides_control').children(); 
    var newContainer = $('<div class="slides_container" />'); 
    var slides = $('#slides'); 

    slides.empty().append(newContainer); 
    newContainer.append(children); 
    newContainer.append('<div><h1>New slide</h1></div>'); 

    slides.slides(); 

    return false; 
}); 

당신은 여기로 재생할 수 있습니다 : 한편

, 당신은이 작은 해킹을 사용할 수 있습니다 암호. 꽤 안정적이지만 마일리지가 다를 수 있습니다.

P..live() 메소드는 jQuery 1.7부터 사용되지 않습니다. 이 예제에서는 이벤트 위임이 필요하지 않지만 새로운 구문을 사용해야합니다.

$(document).on('click', 'a.add', function() { 
    console.log('Do something'); 
}); 
+0

그 위대한 작품! github에서 최신 버전을 테스트 할 것입니다. 대단히 감사합니다. – Oterox

0

$("#slides").slides("update");

+0

"return false"전에 추가했습니다. 해당 설명서에서 "업데이트"옵션을 찾을 수 없습니다. – Oterox

관련 문제