jquery附加的html无效

Question

我试图清空一个svg并附加一些它的内部div，它不起作用但可以看到html部分以褪色的颜色加载到浏览器中。 当我在浏览器中编辑它并将其添加回来时，它可以工作。

div部分，

<li class="chart">
    <svg id="lineChartSVG" class="lineChart--svg">
       <defs>
           <linearGradient id="lineChart--gradientBackgroundArea" x1="0" x2="0" y1="0" y2="1">
                            <stop class="lineChart--gradientBackgroundArea--top" offset="0%" />
                            <stop class="lineChart--gradientBackgroundArea--bottom" offset="100%" />
            </linearGradient>
         </defs>
     </svg>               
 </li>

这就是我的方式，

$('#lineChartSVG').empty();
 var html = ' <defs> <linearGradient id=\"lineChart--gradientBackgroundArea\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\"> <stop class=\"lineChart--gradientBackgroundArea--top\" offset=\"0%\" /> <stop class=\"lineChart--gradientBackgroundArea--bottom\" offset=\"100%\" /> </linearGradient> </defs>';
 $('#lineChartSVG').append(html);
 inFlightRequestCountChart(); 

任何帮助将非常感激。

谢谢！

Answer 1

这是因为SVG元素没有动态更新。 刷新容器元素后，它应该更新。 在这种情况下<li>即给它id='chart1' ，但我建议使用指定的（由你）容器。

$("#chart1").html($("#chart1").html());

说明： jquery的追加不使用svg元素？

示例： http ： //jsbin.com/ejifab/1/edit

Answer 2

请尝试，清空标签的内容。

 $('#lineChartSVG').text('');

Answer 3

尝试使用这样的html() 。

$('#lineChartSVG').empty();
var html = ' <defs> <linearGradient id=\"lineChart--gradientBackgroundArea\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\"> <stop class=\"lineChart--gradientBackgroundArea--top\" offset=\"0%\" /> <stop class=\"lineChart--gradientBackgroundArea--bottom\" offset=\"100%\" /> </linearGradient> </defs>';
$('#lineChartSVG').html(html);
inFlightRequestCountChart();