Highcharts Загрузка данных из таблицы, порожденного Ajax

Question

OK Так что есть функция AJAX, которая выводит следующий HTML таблицу на странице после нажатия на кнопку отправить в форме:

<table id="assetAllocation"> 
    <thead> 
     <tr> 
      <th></th> 
      <th>Protector</th> 
      <th>Balanced</th> 
      <th>Progressive</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <th class="theading">Cash</th> 
      <td>15.69</td> 
      <td>18.43</td> 
      <td>15.40</td> 
     </tr> 
     <tr> 
      <th class="theading">Equities</th> 
      <td>30.54</td> 
      <td>43.18</td> 
      <td>54.90</td> 
     </tr> 
     <tr> 
      <th class="theading">Fixed Income</th> 
      <td>23.31</td> 
      <td>14.49</td> 
      <td>8.00</td> 
     </tr> 
     <tr> 
      <th class="theading">Hedge Fund</th> 
      <td>0.40</td> 
      <td>4.94</td> 
      <td>4.98</td> 
     </tr> 
     <tr> 
      <th class="theading">Commodities</th> 
      <td>2.36</td> 
      <td>3.73</td> 
      <td>3.56</td> 
     </tr> 
     <tr> 
      <th class="theading">Other</th> 
      <td>27.70</td> 
      <td>15.22</td> 
      <td>13.16</td> 
     </tr> 
    </tbody> 
</table> 

У меня также есть следующие Highcharts функция, что я только что определили в нижней части страницы:

function assetChart() { 
    $('#assetChart').highcharts({ 
     data: { 
      table: document.getElementById('assetAllocation') 
     }, 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Data extracted from a HTML table in the page' 
     }, 
     yAxis: { 
      allowDecimals: false, 
      title: { 
       text: 'Units' 
      } 
     }, 
     tooltip: { 
      formatter: function() { 
       return '<b>'+ this.series.name +'</b><br/>'+ 
        this.y +' '+ this.x.toLowerCase(); 
      } 
     } 
    }); 
} 

Кроме того, я имею этот HTML как часть статического HTML страницы:

<a href="#" id="clicker">Click me</a> 
<div id="assetChart"></div> 
<script> 
$(function() { 
    $('#clicker').click(function(){assetChart()}); 
}); 
</script> 

Идея состоит в том, что после того, как таблица, загруженная AJAX, будет сгенерирована выше, я могу щелкнуть ссылку «нажмите меня», и данные появятся на диаграмме в контейнере assetChart. Однако это не работает. Ничего на самом деле не происходит - ошибок javascript не зарегистрировано. Делает ли getElementById работу для выбора контента, созданного AJAX? Кто-нибудь может понять, что не так с моим кодом?

Answer 1

Я сделал глупую ошибку, пренебрегая включением модуля данных с высоким качеством. Включив его, мой код теперь работает.

Answer 2

Я создал здесь скрипку, чтобы показать вам, как это сделать: http://jsfiddle.net/kQGFt/3/. В принципе, запустите свой JS после готовности DOM. Используйте метод .on() для делегирования событий.

jQuery(document).ready(function($) 
{ 
    $(document).on('click', '#clicker', function(){ 
     assetChart(); 
    }); 
}); 

EDIT: скрипка теперь полностью функциональна.