javascript - 无法在 JavaScript 中找到 id

Question

我正在尝试在动态创建的 div 内绘制图表。一串 HTML div 从后端传递，然后附加到 comparison_widgets div 中。然后调用一个需要在该 div 内绘制图表(Highcharts)的函数。

但是当它转到它说的函数时 错误:语法错误，无法识别的表达式:#id_Asia/Pacific_NorthAmerica throw new Error("语法错误，无法识别的表达式:"+ msg );

我猜是找不到 id。我哪里出错了？

这里的result[1]是div字符串，即

<div id="widget_Asia/Pacific_NorthAmerica" class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="portlet-header ui-corner-all">
<span class="close right">x</span>
Asia / Pacific_North America
</div>
<div id="id_Asia/Pacific_NorthAmerica" class="portlet-content"></div>
</div>

结果[2]为id_Asia/Pacific_NorthAmerica

result[0]是需要绘制在图表上的数据。

AJAX 功能

 $.ajax({
    dataType : "json",
    type: "POST",
    url: "/dashboard/",
    data : { 'comparison_widget_id' : comparison_widget_id,'level_id':level_id,  },
    success: function(result){
        $("#comparison_widgets").append(result[1]);
        var div_id = "id_"+result[2];
        comparison_chart(div_id,result[0]);
        }
  });


function comparison_chart(div_id,result) {

  var MAXPOINTS = 20;
  var level_number = 0;
  Highcharts.setOptions({
      global: {
          useUTC: false,
      }
  });

$("#"+div_id).highcharts({
    chart: {
      events: {
      load: function() {

          // set up the updating of the chart each second
          var series = this.series[0];


          setInterval(function() {
              var x = (new Date()).getTime(), // current time
                  y = Math.random();
              if(series.data.length > MAXPOINTS){
                series.addPoint([x, y], true, true);  
              }
              else{
                series.addPoint([x, y], true, false);
              }



          },5000);
      },
  }

    },
    title: {
        text: 'Energy Chart'
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
            month: '%e. %b',
            year: '%b'
        }
    },

    tooltip: {
        formatter: function() {
            var s;
                s = this.y + 'kWh';
            return s;
        }
    },

    series: [{
        type: 'spline',
        name: 'Live Data',
        data: result[0],
        showInLegend: true,

    }, {
        type: 'pie',
        data: result[2],
        center: [90, 20],
        size: 125,
        cursor: 'pointer',
        showInLegend: true,
        dataLabels: {
            enabled: false,
        },
        point :{
          events:{
            click : function(){
              level_number = level_number + 1;
              $.ajax({
                dataType: "json",
                type : 'POST',
                url : '/dashboard/',
                data : {'name': this.name, 'level_number' : level_number},
                success: function(result){
                  comparison_chart(result);
                }
              });
            }
          }
        },
    }]
  });
}

Answer 1

使用$('#widget_Asia\\/Pacific_NorthAmerica')