Javascript работает дважды

Question

Мне нужно разработать небольшое приложение для школы, и я сначала немного спроектировал в фотошопе и «преобразовал» его в HTML. Все прошло хорошо. Я создал собственный выпадающий список с помощью JavaScript, и он работал гладко. Я только что попытался внедрить CodeIgniter в дизайн, но JavaScript начал работать дважды.

Я пытался сравнить код простой HTML-версии с результатом codeigniter, но, похоже, не могу найти никакой разницы.

Может кто-нибудь из вас может мне помочь? Вот результат CodeIgniter: http://intellia.itforit.net/index.htm

Как спросил Кроф Дракула, вот самые важные части кода:

Фактический плагин 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
});

Спасибо заранее, Duckness

Answer 1

Проблема в том, что ваш canvasDrawing.js в «неважном материале холста» вызывает ошибку javascript.Если холст, который он описывает, действительно существует, ваш стиль styleForm выполняется только один раз.Так что добавьте это в ваш HTML:

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

И волшебство случится.Или, в вашем файле canvasDrawing, добавьте предложение сразу после styleForm:

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

Я не совсем понимаю, почему из-за ошибки в этой функции она запускается дважды, но это определенно проблема,Смотрите: ваш код + элемент canvas = рабочий .