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

Question

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

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

Update

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

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