javascript - 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's append not working with svg element?

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