外部jquery在加载时不起作用

Question

我正在完成一项任务，我想在html中创建在线名片。现在，在加载时，它看起来像我画了不同的形状。

根据你看到的第一张图片，我画了不同的形状

在第二张图片中，当我选择一张图片时，塑造的工具包是隐藏的，因此我无法在图像上创建形状。

因此，根据我的代码研究，我意识到jquery“initialize：function（）”在选择图片后没有加载。所以可以说在加载时jquery并没有激发。

这是我的代码，

<script type='text/javascript' src='js/jquery.min.js'></script>
<script src="js/kinetic-v3.9.3.js"></script>
<script type="text/javascript" src="js/version1.js"></script>
<link href="css/layout.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen" />
<!-- Menu -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie/ie.css" />
<![endif]-->
<link rel="stylesheet" href="styles/global.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mobile.js"></script>
<script type="text/javascript" src="js/form.js"></script>
<script type="text/javascript" src="./lib/jquery.1.10.2.min.js"></script>
    <!-- jquery -->
    <script type="text/javascript" src="./Pixanova_files/jquery.min.1.9.0.js"></script>
    <!-- backbone -->
    <script type="text/javascript" src="./Pixanova_files/underscore.min.1.4.4.js"></script>
    <script type="text/javascript" src="./Pixanova_files/backbone.min.0.9.10.js"></script>

    <!-- wColorPicker -->
    <link rel="stylesheet" type="text/css" href="./Pixanova_files/wColorPicker.css">
    <script type="text/javascript" src="./Pixanova_files/wColorPicker.js"></script>

    <!-- wPaint -->
    <script type="text/javascript" src="./Pixanova_files/jquery.ui.core.min.js"></script>
    <script type="text/javascript" src="./Pixanova_files/jquery.ui.widget.min.js"></script>
    <script type="text/javascript" src="./Pixanova_files/jquery.ui.mouse.min.js"></script>
    <script type="text/javascript" src="./Pixanova_files/jquery.ui.draggable.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./Pixanova_files/wPaint.css">
    <script type="text/javascript" src="./Pixanova_files/wPaint.js"></script>

    <!-- pixanova -->
<script type="text/javascript" src="./Pixanova_files/pixanova.js"></script>
<link rel="stylesheet" type="text/css" href="./Pixanova_files/pixanova.css">


    <div id="wrapper">
      <!--header-->

      <div id="content">

        <!-- container is the div id from where the image is display -->

        <div id="container" style="width:600px; height:600px; float:right"> </div>

        <script type="text/javascript">
            var pixanova = new PixanovaView321();
        </script>

        <div id="editor">
          <ul id="text" style="float: left; margin-right:10px;">
            <!--<div id="spinner" class="spinner" style="display:none;margin-left:80px;margin-bottom:20px;"> Image Uploading<img src="images/ajax.png" alt="loading"> 
            </div>-->
            <div id="container2" style="width:140px;"> </div>

            <li>
              <label>&nbsp;</label>
              <input type="submit" id="textsubmit" value="Add Text"/>

            <select name="Choice" onchange="setImage(this);">
                <option value="images/blue.jpg">Photo 1</option>
                <option value="images/black.jpg">Photo 2</option>
                <option value="images/red.jpg">Photo 3</option>
                <option value="images/redplan.jpg">Photo 4</option>
            </select> 

            <input type='file' />

            </li>
          </ul>
          <p class="clearing" /></p>
                  </div>

      </div>
    </div>
    <!--container--> 

    </body>

这里是工具包调用的外部pixanova.js代码

//这个变量在pixanova.html中调用PixanovaView321函数

var PixanovaView321 = Backbone.View.extend(
{
    initialize: function()
    {
        alert();
        //Menu option
        $('#container').wPaint({
            menuOffsetX: 50,
            menuOffsetY: 50,
            menuOrientation: 'horizontal',
            strokeStyle: "yellow"
        });
    },
});