jQuery 사이클 텍스트 슬라이드 쇼가 작동하지 않습니다.

Question

jQuery주기 플러그인을 사용하는 데 문제가 있습니다. 내 페이지에서 이미지 및 텍스트 슬라이드 쇼에 사용합니다. 이미지 슬라이드 쇼는 잘 작동하지만 텍스트 슬라이드 쇼 중 하나에 문제가 있습니다. 아래의 코드를 고려하십시오. 아래의 div를 텍스트 슬라이드 쇼의 슬라이드로 사용하고 있습니다. 나는 위의 HTML 페이지의 정적 블록으로 코드를 사용하는 경우

<div> 
    <p>This is slide1</p> 
    <h4>author 1</h4> 
</div> 
<div> 
    <p>This is slide2</p> 
    <h4>author 2</h4> 
</div> 

는, 슬라이드 쇼 잘 작동합니다. 그러나 Javascript를 통해 위 코드를 생성하면 오류가 발생합니다. 다음은 Chrome 콘솔에서 제공하는 것입니다.

내가이 문제가 무엇인지 알아낼 수 아니다 정의되지 않은

의 특성 'cycleW'을 읽을 수 없습니다, 그래서 어떤 도움도 정말 감사하겠습니다. 감사!

Answer 1

나는 당신과 같은 문제를 겪었고 이론이 옳았다는 것을 알았습니다 -주기 플러그인은 DOM로드가 완료되기 전에 슬라이드를 구문 분석하려고합니다. 내가 할, 그래서

function startSlideshow(id, timeout) { 
    var children = $("#" + id).children().size(); 
    // child div loaded yet? 
    if (children <= 0) { 
      // no! wait for it 
      setTimeout("startSlideshow('" + id + "', '" + timeout + "')", timeout); 
    } 
    else { 
      // yes, start the cycle plugin 
      $("#" + id).cycle({ 
        fx: 'fade', 
        timeout: timeout, 
        speed: 500 
      }); 
    } 
} 

을 내가 AJAX 전화를 걸 때 된 div를로드 : 나는 그렇게 같이 자전거를 시작할 것 전에 로딩을 완료 사업부를 기다릴 것 sceond 함수를 작성했다 문제를 해결하려면 그렇게 좋아요 :

// load divs with multiple ajax calls 
addRandomImages("slideshow"); 
addRandomImages("slideshow"); 
addRandomImages("slideshow"); 
// start the slideshow when the divs are loaded 
startSlideshow("slideshow", 5000) 

Answer 2

나는 문제가 HTML에서 자바 스크립트에 의해 생성 된 isnt 또는 그 참조 isnt 변수에 저장됩니다 그래서 그게 왜 정의되지 않은 오류 thats 생각합니다. 그러나 그 정보만으로는 알기가 정말 어렵습니다.

당신은 html을 생성하는 javascript를 먼저 실행 한 다음 jquery가 해당 작업을 수행하도록하는 body onload 이벤트로 시도해 보셨습니까?

Answer 3

페이지가으로로드 될 때 JavaScript를 사용하여 HTML을 생성하는 경우 다음과 같이 jQuery를 사용하고 플러그인 전에 HTML 생성 스크립트를 호출하고 있는지 확인하십시오.

$(function() { 
    //code goes here 
}); 

당신은 (예를 들면 버튼 클릭) 당신은 그래서, 그 작업을 할뿐만 아니라 새로운 코드에 플러그인 기능 (들)을 호출 할 필요가 이벤트에 HTML을 생성하는 경우 :

$(function() { 
    myBtn.click(function() { 
     var generatedElement = generateSomeElement(); 
     $('body').append(generatedElement); 
     generatedElement.callPlugin(); 
    }); 
});