ajax 호출 후 캔버스 자바 스크립트 다시로드

Question

시나리오 : Canvas 기반 포트폴리오 항목이 ajax 기반 페이지 매기기로 표시됩니다.

문제점 : ajax로 콘텐츠의 다음 페이지를로드 한 후 스크립트 태그가 캔버스 태그 안에 없습니다.

시도 : 캔버스 태그 앞에 스크립트 태그를 추가하면로드되지 않으므로 스크립트를로드하는 데 문제가 발생합니다.

조사 : jquery script not working : 보안 때문에 스크립트를 검색 할 수없는 것 같습니다.

가능한 대안 : 캔버스 태그 외부에서 캔버스 콘텐츠를 추가하지만 동적으로 생성 된 포트폴리오 제목 태그를 전달하는 데 어려움이 있습니다!

코드 :

<ul id="products-list"> 
     <?php 
      $i = 0; 
      while($the_list->have_posts()): $the_list->the_post(); //wordpress loops through posts 
     ?> 

     <li class="product-item<?php echo $i;?>"> 
      <script>functionForMakingACanvasOverlayUsingThePostTitle("<?php echo get_the_title() ?>");</script> 
      <canvas></canvas> 
     </li> 

     <?php $i++; ?> 

    <?php endwhile; ?> 
    </ul> 

6 항목이 한 페이지 당 표시하고 다음 버튼이 다음 6 개 항목

제안을 호출하는 아약스를 사용? 감사.

Answer 1

myYou는 가장 싫어하는 eval 메서드를 호출하지 않고도 AJAX를 사용하여 자바 스크립트 코드를 추가 할 수 없습니다. 그리고 당신의 경우에, 당신은 필요가 없습니다. 당신의 대답은 자바 스크립트를 직접 호출하는 것이 아니라 객체에서 외부 자바 스크립트를 호출하는 것입니다. 당신이 우리를 준 코드는 아래에있는 내 생각은 데모 용으로 순수하므로, 매우 스파 스 - 당신은 실제 상황 번역해야합니다 :

<canvas><div id="mytitle"></div></canvas> 
<script> 
    function drawTitleOverlay(title){ 
     var titleoverlayhtml = buildTitleOverlayHTMLFromTitle(title); 
     document.getElementById('mytitle').innerHTML = titleoverlayhtml; 
    } 

    function nextPage(){ 
     var data = getAJAXData(); 
     var title = getTitleFromData(data); 
     drawTitleOverlay(title); 
    } 
</script>