-1

I have one simple html file with a heading and two empty div

<h1>Blablabla.</h1>
<div id="div1"></div>
<div id="div2"></div>

These two div have to be filled with some SVG contain generated with jquery SVG library (developped by Keith Wood). For that pupose, I included these scripts

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="./jquery.svg.package-1.4.5/jquery.svg.js"></script>
  <script type="text/javascript" src="./myscript.svg.js"></script>

Then having a look at myscript.svg.js, it is a jquery code, with its ready function that attach plugin1 to div1 and plugin2 to div2 and call the publiv function generateSvg 

$(document).ready(function(){
  $('#div1').plugin1({'param': '5'});
  $('#div1').data('plugin1').generateSvg();
  $('#div2').plugin2();
  $('#div2').data('plugin2').generateSvg();
});

where plugin1 and plugin2 are two jquery plugin writing according to the boilerplate

(function($) {
  $.plugin1 = function(element, options) {
    var defaults = {
      param: '5'
      onFoo: function() {}
    }
    var plugin = this;
    plugin.settings = {}
    var $element = $(element), element = element;
    plugin.init = function() {
      plugin.settings = $.extend({}, defaults, options);
    }
    plugin.generateSvg = function() {
      $element.svg();
      var svg = $element.svg('get');
      var defs = svg.defs();
      generate1Svg(svg);
    }
    var generate1Svg = function(svg) {
      ... etc ... 
    }
    plugin.init();
  }
  $.fn.plugin1 = function(options) {
    return this.each(function() {
      if (undefined == $(this).data('plugin1')) {
        var plugin = new $.plugin1(this, options);
        $(this).data('plugin1', plugin);
      }
    });
  }
})(jQuery);

(function($) {
  $.plugin2 = function(element, options) {
    var defaults = {
    }
    var plugin = this;
    plugin.settings = {}
    var $element = $(element), element = element;
    plugin.init = function() {
      plugin.settings = $.extend({}, defaults, options);
alert('coucou');
    }
    plugin.generateSvg = function() {
alert('toto');
      $element.svg();
      var svg = $element.svg('get');
      var defs = svg.defs();
      generate2Svg(svg);
    }
    var generate2Svg = function(svg) {
      ... etc ... 
    }
    plugin.init();
  }
  $.fn.plugin2 = function(options) {
    return this.each(function() {
      if (undefined == $(this).data('plugin2')) {
        var plugin = new $.plugin2(this, options);
        $(this).data('plugin2', plugin);
      }
    });
  }
})(jQuery);

My problem is the following : the svg drawing coded in plugin1 is well generated, but the svg drawing coded in plugin2 to not appear. Even the alert message do not appears. And if I try to used plugin1 both for div1 and div2, it is not generated in div2 If I do not call the plugin1 for div1 and call plugin2 for div2, it is OK, the svg drawing coded in plugin2 appears

4

1 回答 1

0

运行 javascript 时出现语法错误：

resetSize is not defined on line 100.

该语法错误会阻止任何后续代码运行，因为它在第一个 div 的内容生成结束时有效，但第二个 div 的代码无法运行。当您注释掉第一个 div 的代码时，您会阻止语法错误的发生，并且第二个 div 可以工作。

于 2013-11-05T13:04:19.137 回答