Блог

У меня есть форма, которая использует этот плагин jQuery Editable-Select. У меня есть 2 поля выбора (как вы можете видеть на изображении ниже). Они оба используют classname editable-select , и когда я выполняю JS — похоже, вызов влияет только на один из них. Когда я показываю результаты editableSelect(...) обоих выбранных элементов, возвращаются, но один из них явно не затронут плагином. Этот выбор не заполняется ajax и сразу доступен для DOM.

Я извлек базовый код и поместил его в JSFiddle, и он работает просто отлично, поэтому у меня не сложилось впечатления, что есть проблема с плагином или что-то в этом роде… Я уверен, что я что-то упускаю из виду.

Если я удалю класс из рабочего поля выбора, первое по-прежнему не будет работать, так что это должно быть что-то с полем выбора — но я действительно не могу понять, что .. Код для field1 выбора копируется и вставляется прямо со страницы. для меня все в порядке.

Где я должен искать ошибку — я пытаюсь отладить это уже несколько часов, и все выглядит законно. Нет ошибок в консоли / firebug. Пожалуйста, помогите 🙂

JS

 theSubjectBox = $('.editable-select').editableSelect({
    bg_iframe: true,
    onSelect: function(list_item) {
        alert('List item text: '  list_item.text()   ' Input value: '  this.text.val());
    },
    case_sensitive: false,
    items_then_scroll: 10 
});
console.log(theSubjectBox);
  

Я тоже пробовал

 theSubjectBox = $('#field1').editableSelect({...});
  

Вывод на консоль

 [select#field1.editable-select, select#insertQM_hidden_select.editable-select]    
0       select#field1.editable-select
1       select#insertQM_hidden_select.editable-select
//The first item is clearly not touched by the plugin. Why!? :)
  

HTML

 <!--Not Working-->
<select style="width:200px;" name="field1" id="field1" class="editable-select">
    <option value=''></option>
    <option value="Answer Needed">Answer Needed</option>
    <option value="Appointment Needed">Appointment Needed</option>
    <option value="BULLETIN">BULLETIN</option>
    <option value="Catalog/Literature">Catalog/Literature</option>
    <option value="Comment(s)">Comment(s)</option>
    <option value="Company Policy">Company Policy</option>
    <option value="F.Y.I.">F.Y.I.</option>
    <option value="IMPORTANT">IMPORTANT</option>
    <option value="Information Please">Information Please</option>
    <option value="Meeting Information">Meeting Information</option>
    <option value="Need Your Help">Need Your Help</option>
    <option value="Needs Visit">Needs Visit</option>
    <option value="Personal">Personal</option>
    <option value="Personnel Change">Personnel Change</option>
    <option value="Question(s)">Question(s)</option>
    <option value="Quotation Needed">Quotation Needed</option>
    <option value="Reminder">Reminder</option>
    <option value="Thank You">Thank You</option>
    <option value="Trade Show">Trade Show</option>
</select>

<!--Working Fine-->  
<select style="width:630px;" id="insertQM" name="insertQM" class="editable-select">
    <option value="">Insert Quick Message</option>
    <option value="Can I see you in my office?">Can I see you in my office?</option>
    <option value="I'll take care of it right away.">I'll take care of it right away.</option>
    <option value="I'm going to lunch now!">I'm going to lunch now!</option>
    <option value="MUST CALL IMMEDIATELY!">MUST CALL IMMEDIATELY!</option>
    <option value="No problémo">No problémo</option>
    <option value="Not yet">Not yet</option>
    <option value="Remind me later about that.">Remind me later about that.</option>
</select>
  

Я нашел решение, хотя я не уверен, почему это происходило в первую очередь. Я только что прокомментировал следующий оператор if в предоставленном файле JS. Я понятия не имею, как .data('editable-selecter') был бы установлен объект этого элемента, но комментирование этого работает.

   //if($(this).data('editable-selecter') !== null) {
    instances[i] = new EditableSelect(this, settings);
    $(this).data('editable-selecter', i);
  //}