脚本标签不附加到表[重复]答案

【问题标题】：Script tag does not append to table [duplicate]脚本标签不附加到表[重复]
【发布时间】：2013-06-26 08:14:42
【问题描述】：

我不知道为什么我总是遇到最奇怪的问题。我正在使用剑道 UI 图表。在 PartialView 中。当 PartialView 被 jQuery 调用时，它会在运行时生成 div 和一些 jQuery 代码。我将整个 div 和 JQ 代码附加到表格行的单击行下方。问题是，它只附加了 div，它忽略了脚本标签及其代码，这是渲染图表所必需的。

我的部分视图是：

@(Html.Kendo().Chart()
        .Name("XXXProducts")
        .Title("XXX Products")
        .Legend(legend => legend
            .Visible(false)
        )
        .ChartArea(chartArea => chartArea
            .Background("transparent")
        )
        .Series(series =>
        {
            series.Bar(Model.SalesAxis).Name("Total Sales");
        })
        .CategoryAxis(axis => axis
            .Categories(Model.MonthsAxis)
            .MajorGridLines(lines => lines.Visible(false))
        )
        .ValueAxis(axis => axis
            .Numeric()
            .Max(Model.SalesAxis.Max() + 100)
            .Line(line => line.Visible(false))
            .MajorGridLines(lines => lines.Visible(true))
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Template("#= series.name #: #= value #")
        )
)

我在其他页面上的 jQuery 代码来呈现视图：

    function RenderChart(row) {

    var rowIndex = $("#tblDetail").find($(row)).index() + 1;
    var chartData = '';

    $.get('@Url.Action("MonthlyChart", "Chart")', function (data) {
        chartData = "<tr style='height:300px;'><td colspan='5'>" + data + "</td></tr>";
        $('#tblDetail tr:nth-child(' + rowIndex + ')').after(chartData);
    });
}

当我提醒“chartData”时，它显示以下内容：

<tr><td colspan='5'><div class="k-chart" id="XXXProducts"></div><script>    jQuery(function(){jQuery("#XXXWaterProducts").kendoChart({"chartArea":{"background":"transparent"},"title":{"text":"Site Visitors Stats /thousands/"},"legend":{"visible":false},"series":[{"name":"Total Sales","type":"bar","data":[56000,74500,45000,86000,49850,63482,97600,63250,79860,42100,32010,89200]}],"categoryAxis":[{"majorGridLines":{"visible":false},"categories":["January","February","March","April","May","June","July","August","September","October","November","December"]}],"valueAxis":[{"majorGridLines":{"visible":true},"line":{"visible":false},"max":97700}],"tooltip":{"template":"#= series.name #: #= value #","visible":true}});});</script> </td></tr>

但是当我检查源时它只显示：

<tr><td colspan='5'> <div class="k-chart" id="XXXProducts"></div></td></tr>

scripts标签找不到了。

【问题讨论】：

叹息。您不能附加驻留在字符串中的脚本标记。这个问题已经被问和回答了数百次了......
你可以使用 eval() 方法从字符串运行 js 脚本。

标签： jquery asp.net-mvc kendo-ui

【解决方案1】：

生成客户端代码不是好的做法。在您的情况下，最好在生成的 div 的数据属性中返回 json 数据。之后，您可以使用 JSON.parse() 方法和创建图表的 run 方法将字符串从数据属性解析为对象。

function RenderChart(row) {

    var rowIndex = $("#tblDetail").find($(row)).index() + 1;
    var chartData = '';

    $.get('@Url.Action("MonthlyChart", "Chart")', function (data) {
        var dataObj = JSON.parse(data);
        chartData = "<tr style='height:300px;'><td colspan='5'></td></tr>";
        $('#tblDetail tr:nth-child(' + rowIndex + ')').after(chartData);
        $("#XXXWaterProducts").kendoChart(dataObj);
    });
}

您需要修改 @Url.Action("MonthlyChart", "Chart") 以返回带有 json 数据的 onlu 字符串。您也可以返回 JsonResul 类型并使用 $.getJSON 方法来避免使用 json 解析 (var dataObj = JSON.parse(data);)

【讨论】：