Перезагрузка холста javascript после вызова ajax

Question

Сценарий: элементы портфеля на холсте, перечисленные с разбивкой по страницам 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 элементов показаны на странице и следующая кнопка использует Ajax для вызова следующие 6 пунктов

Предложения? Благодарю.

Answer 1

myYou не может добавить код javascript, используя AJAX, не вызывая самый ненавидящий метод eval. И в вашем случае вам не нужно. Ваш ответ заключается в вызове внешнего javascript на объект, а не при вызове javascript напрямую. Код, который вы дали нам очень редко, так что моя идея ниже исключительно для демонстрационных целей - вам нужно перевести его для реальной ситуации:

<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>