Javascript运行两次

Question

我必须为学校开发一个小型应用程序，我首先在 Photoshop 中进行了一些设计，然后将其“转换”为 html。一切顺利。我用 javascript 创建了一个自定义下拉列表，它运行顺利。我刚刚尝试在设计中实现 CodeIgniter，但 javascript 开始运行两次。

我尝试将纯 html 版本的代码与 codeigniter 结果进行比较，但我似乎找不到任何区别。

你们中的任何人都可以帮助我吗？ 这是 CodeIgniter 的结果： http://intellia.itforit.net/index.htm

正如 Krof Drakula 所问的，这里是最重要的代码片段：

实际的 jquery 插件：(styleForm.js)

    ;(function($){
    $.fn.styleForm = function() {
        var form = this;

        /* Select */
        $('select', this).each(function(){
            var div = '<div class="styledSelect"><ul>';
            var first = false;

            $('option', this).each(function(){
                var cssclass = "";
                if(!first) {
                    first = true;
                    cssclass = 'class="first"'
                }
                div += '<li ' + cssclass + ' id="' + $(this).attr("value") + '">' + $(this).text() + '</li>';
            });

            div += '</ul></div>';
            $(this).hide();
            $(this).after(div);
        });

        $('.styledSelect ul').toggle(function(){
            $('li:not(.first)', this).show("fast");
        }, function(){
            $('li:not(.first)', this).hide("fast");
        });

        $('.styledSelect ul li:not(.first):not(.selected)').click(function(){
            var id = $(this).attr('id');
            var content = $(this).text();
            $('.styledSelect ul li.first').attr('id', id).text(content);
            $('.styledSelect ul li').css({'font-weight': 'normal'});
            $(this).css({'font-weight': 'bold'});

            /* SELECT in Select form item */
            var selected = $('select option[value="' + id + '"]:not(.first)', form).get(0);
            selected.setAttribute("selected", "selected");
            //$(form).submit();
        });

    };
})( jQuery );

这里是它启动的地方：(canvasDrawing.js)

$(document).ready(function(){
     $('form').styleForm();
     //Unimportant canvas stuff
});

提前谢谢， 鸭子

Answer 1

问题是您的 canvasDrawing.js 在“不重要的画布内容”中会导致 javascript 错误。如果它描述的画布确实存在，那么您的 styleForm 内容只会运行一次。因此，将其添加到您的 HTML 中：

        <canvas id="floorplan"></canvas>

魔法就会发生。或者，在您的 canvasDrawing 文件中，在 styleForm 之后添加这样的子句：

var canvas = document.getElementById('floorplan');
if (!canvas)
    return;

我实际上并不太清楚为什么该函数中出现错误会导致它运行两次，但这绝对是问题所在。看到它：your code + a canvas element = working。