jQuery конфликт проблема с заменой элемента выбора формы

Question

Я работаю над сценарием замены элемента select для проекта киоска, который берет элемент и заменяет его, а его <options> s с divs. У меня есть две версии - «нормальная» и «модальная» для элементов <select> и <select[multiple="multiple"]>. Независимо друг от друга, отдельные замены работают так, как должны. Когда я размещаю их все на странице, они функционально ломаются. В частности, как немодальные <select>, так и немодальные <select[multiple="multiple"]> не переключают классы при нажатии на соответствующие им div.option s. Я полагаю, что есть какой-то конфликт с jQuery, который вызывает проблему, но я слишком новичок, чтобы понять это.

В моем коде вы заметите множество переменных и примеров добавления html, которые могут показаться ненужными. Цель сценария - заменить элементы формы, сгенерированные конструктором форм, который генерирует простой тег и не может быть изменен.

Я включил свой код здесь: http://jsfiddle.net/zumwalt/52At7/

Любая помощь очень ценится!

Answer 1

Вот что происходит:

 $('div.select-normal div.option-'+value+'').click(function() { 
     option.prop("selected", "selected");
     $('div.select-normal div.option').removeClass('selected');
     $(this).toggleClass('selected');
 });

Когда приведенный выше код выполняется для обычного выбора нескольких, класс css корректно применяется.Однако позже у вас есть этот код для модального выбора многие:

$('div.option').click(function() {
    var value = $(this).attr('id');
    var option = $('option[value=' + value + ']');
    var optiontext = $(this).text();

    option.prop("selected", !option.prop("selected"));
    $(this).toggleClass('selected'); // HERE IS THE ERROR
    if ($(this).hasClass('selected')) {
        $('ul.multiselect-dropdown-options')
            .append('<li id="' + value 
                + '" class="dropdown-option drop-down-option-' 
                + value + '">' + optiontext 
                + '<a class="remove-option">x</a></li>');
    } else {
        $('.drop-down-option-' + value).fadeOut().remove();
    }
});

Так как нажатие на нормальный выбор многих также вызывает $ ('div.option'). Click (), он выполняет toggleClassи удалив «выбранный» класс, который был добавлен ранее.

Кстати, очень сложно отладить скрипку, если вы над ней работаете.При публикации скрипта в SO, пожалуйста, опубликуйте URL-адрес разветвления, который вы не будете редактировать.

Обновление

Дайте человеку рыбу, и он ест в течение дня... научить человека ловить рыбу, и он ест на всю жизнь.Несмотря на то, что ваша скрипка менялась, я отлаживал ее с помощью инструментов разработчика Google Chrome.Просто перейдите к скрипке, щелкните правой кнопкой мыши и выберите «Проверить элемент».Перейдите на вкладку «Сценарии» и в раскрывающемся списке выберите сценарий «show /».Затем вы можете нажать на номера строк, чтобы установить точки останова в JavaScript.Вернитесь в Chrome, сделайте что-нибудь на панели результатов, и Chrome должен достичь точки останова.Затем вы можете выполнить действия и посмотреть, строка за строкой, как DOM влияет на ваш скрипт.

Вам нужно будет установить точки останова внутри ваших функций each () и click (), поскольку в Chrome нет очень хороших функций Step Into (он входит в исходный код jquery).Кроме того, наличие двухэлементного дисплея помогает в этом случае, так что вы можете пройтись по отладчику на одном мониторе, одновременно просматривая результаты DOM-скрипки на другом мониторе.