Question

我编写了一个jquery插件，使用Flot将HTML表转换为图表。 HTML是从XSLT生成的，在XSLT中，我有以下代码来调用我的插件。此代码尝试在blah1和blah2 HTML div中并排显示两个图表（每个div中有一个）：

<div id="blah1" style="width:50%;height:100px;float:left;position:relative; padding: 0px">
    <script language="javascript" defer="true">
        <xsl:comment>
            <![CDATA[$(document).ready($('#blah1').myPlugin()));]]>
        </xsl:comment>
    </script>
</div>

<div id="blah2" style="width:50%;height:100px;float:right;position:relative; padding: 0px">
    <script type="javascript" defer="true">
        <xsl:comment>
            <![CDATA[$(document).ready($('#blah2').myPlugin()));]]>
        </xsl:comment>
    </script>
</div>

虽然通过浏览器查看时生成HTML的方式存在问题。左div（blah1）正确生成HTML，包含canvas元素和所有内容（并在浏览器中显示图表），但是正确的div（blah2）生成以下内容：

<script type="javascript" defer="true">
    <!--$(document).ready($('#blah2').myPlugin());   //-->
</script>

知道这里发生了什么吗？为什么一个div工作而另一个不工作..？另外一个奇怪的事情是出现在blah1中的图表实际上是应该出现在blah2中的图表。 blah2图表覆盖了blah1中代码绘制的图表。如果我注释掉了blah 2 jquery调用，那么blah1 div正确地显示了预期的图表。

Answer 1

正如@PabloPozo所说，看起来语言属性被折旧会将你的脚本标签改为

<script type="text/javascript" defer="true">

</script>

Answer 2

谢谢大家，我想到了问题......我在jquery自定义插件中将div的值硬编码为“blah1”，所以无论我在哪个div上调用插件代码都应用于同一个div每次都这样。经过4个小时的睡眠后，这对我来说变得很明显..（我无法相信睡眠剥夺会让你做什么）

相邻HTML div中的两个flot图表导致问题

2 个答案: