0

好的，所以我有一个 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 生成的内容？谁能看到我的代码有什么问题？

4

2 回答 2

1

我在这里创建了一个小提琴来向您展示如何使其工作：http: //jsfiddle.net/kQGFt/3/。基本上，在 DOM 准备好之后运行你的 JS。使用.on()事件委托的方法。

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

编辑：小提琴现在功能齐全。

于 2013-05-24T13:52:37.627 回答
0

我犯了一个愚蠢的错误，忽略了包含 highcharts 数据模块。包含它后，我的代码现在可以工作了。

于 2013-05-24T14:09:35.003 回答