Выполнение функции JS из ответа AJAX с HTML + JS

Question

Я использую AJAX в первый раз, чтобы избежать обновления страницы в форме submit. Он отлично работает, данные принимаются в HTML-форме и помещаются внутри нужного div, единственное, что не работает, - это одна из функций JS, которую я использую для рисования круговой диаграммы на странице.

Я уже искал проблему, но нашел некоторые решения, в которых ответ был только JS, но в моем случае ответ содержит HTML, включая <script> теги, которые, похоже, не работают? Я воссоздавал мою проблему ниже, имеет вид:

index.php:

<p>Name :</p> 
<input type="text" id="main-id"> 
<input type="submit" id="grab" value="Grab!"> 

<div id="my-data"></div> 

<script src="https://code.jquery.com/jquery-3.1.1.min.js"> </script> 
<script src="js/global.js"> </script> 
<script src="js/pie.js"></script> 

global.js:

$('#grab').on('click', function() { 
    var main-id = $('#main-id').val(); 
    $.post('data.php', { main-id: main-id }, function(data) { 
     $('#my-data').html(data); 
    },'html'); 
}); 

var data получает все эхо от data.php включая тег сценария.

Отрывок из моего кода, который вызывает у меня проблемы:

<script> 
    $(function() { 
     $("#pieChart").drawPieChart([{ 
      title: "Monday", 
      value: 12, 
      color: "#808080>" 
     }, { 
      title: "Tuesday", 
      value: 28, 
      color: "#000000" 
     }, { 
      title: "Wednesday", 
      value: 32, 
      color: "#FF0000" 
     }, { 
      title: "Thursday", 
      value: 8, 
      color: "#800000" 
     }, { 
      title: "Friday", 
      value: 20, 
      color: "#7133FF" 
     }]); 
    }); 
</script> 

<div id="pieChart" class="chart"> </div> 

Функция JS .drawPieChart при вызове заполняющее #pieChart div с PieChart, но в моем случае его помещают в качестве исходного кода внутри страницы, #pieChart div остается пустым ,

Как я могу позвонить .drawPieChart после его размещения внутри страницы?

UPDATE:

Круговая диаграмма CSS:

/* Pie chart */ 

.chart { 
    width: 230px; 
    height: 230px; 
    margin-top: 20px; 
    margin-left: 60px; 
    float:left; 

} 
.pieTip { 
    position: absolute; 
    display:none; 
    z-index: 9; 
    float: left; 
    min-width: 30px; 
    max-width: 300px; 
    padding: 5px 18px 6px; 
    border-radius: 2px; 
    background: rgba(255,255,255,.97); 
    color: #444; 
    font-size: 10px; 
    text-shadow: 0 1px 0 #fff; 
    text-transform: uppercase; 
    text-align: center; 
    line-height: 1.3; 
    letter-spacing: .06em; 
    box-shadow: 0 0 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.5); 
    -webkit-transform: all .3s; 
    -moz-transform: all .3s; 
     -ms-transform: all .3s; 
     -o-transform: all .3s; 
      transform: all .3s; 
    pointer-events: none; 
} 
.pieTip:after { 
     position: absolute; 
     left: 50%; 
     bottom: -6px; 
     display:none; 
     content: ""; 
     height: 0; 
     margin: 0 0 0 -6px; 
     border-right: 5px solid transparent; 
     border-left: 5px solid transparent; 
     border-top: 6px solid rgba(255,255,255,.95); 
     line-height: 0; 
} 
.chart path { cursor: pointer; } 

Последний вопрос

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.

 Смежные вопросы

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.