Загрузка динамических «выбранных» выбранных элементов

Question

Я использую выбранный плагин jQuery (от Harvest).Он работает нормально (document) .ready, но у меня есть кнопка, которая при нажатии использует ajax для динамического создания дополнительных объектов select, для которых я хочу использовать функцию «selected».Тем не менее, только оригинальные элементы select имеют «выбранные» функции, а новые (динамически созданные) не работают.Я использую jQuery.get для добавления новых элементов.Вот пример кода:

jQuery(".select").chosen();//this one loads correctly
jQuery("#add-stage").click(function() {
    jQuery.get('/myurl',{},function(response) {
            //response contains html with 2 more select elements with 'select' class
            jQuery('#stages').append(response);
        jQuery(".select").chosen();//this one doesn't seem to do anything :-(
    });
});

Я думал, что где-то мне нужна функция .live (), но я пока не смог понять это.Любая помощь очень ценится!

Примечание. Я не пытаюсь динамически загружать новые опции, как указано в документации, используя trigger("liszt:updated");

Answer 1

Убедитесь, что элементы response имеют класс select.

console.log( response );  // to verify

Может также быть хорошей идеей применять плагин только к новым элементам.

jQuery(".select").chosen();

jQuery("#add-stage").click(function() {
    jQuery.get('/myurl',{},function(response) {
        console.log( response ); // verify the response

        var $response = $(response);  // create the elements

        $response.filter('.select').chosen(); // apply to top level elems
        $response.find('.select').chosen();   // apply to nested elems
        $response.appendTo('#stages');
    });
});

Кроме того, если /myurl возвращает весь документ HTML, вы можете получить непредсказуемые результаты.

Answer 2

после ввода кода (заполните выделенное). Напишите это

$(".select").trigger("chosen:updated");

Answer 3

У меня была похожая проблема с Chosen.Я пытался динамически добавить новый выбор после того, как пользователь нажимает на ссылку.Я клонировал предыдущий выбор, а затем добавил клон, но выбранные параметры не будут работать.Решение состояло в том, чтобы убрать класс Chosen и добавить элементы, поместить клон в DOM и затем запустить выбранное снова:

clonedSelect.find('select').removeClass('chzndone').css({'display':'block'}).removeAttr('id').next('div').remove();
mySelect.after(clonedSelect);
clonedSelect.find('select').chosen();

Answer 4

Это пример того, как Chosen динамически загружает новую базу данных параметров с помощью ajax при каждом нажатии на Chosen.

$('.my_chonsen_active').chosen({
    search_contains:true
});
$('.my_chonsen_active').on('chosen:showing_dropdown', function(evt, params){
     id_tosend=$(this).attr("id").toString();
     $.get("ajax/correspondance/file.php",function(data){ 
     $('#'+id_tosend).empty();
     $('#'+id_tosend).append(data);
     $('#'+id_tosend).trigger("chosen:updated");
   });
});

Answer 5

1.- Скачать Плагин Livequery и вызвать его со своей страницы.

2.- Отпустите Кракен: $(".select").livequery(function() { $(this).chosen({}); });

Answer 6

один способ, которым вы можете использовать выбранное с ajax:

$.ajax({
    url: url,
    type: 'GET',
    dataType: 'json',
    cache: false,
    data: search
}).done(function(data){
    $.each(data, function(){
    $('<option />', {value: this.value, text: this.text}).appendTo(selectObj);
    });
    chosenObj.trigger('liszt:updated');
});

, где selectObj является конкретным объектом выбора

Но ...

Выбранный реализован очень плохо. Он имеет несколько визуальных ошибок, таких как: выберите какую-то опцию, затем начните поиск новой, затем удалите выбранную и продолжайте печатать - вы получите расширенный «Выбор некоторых опций», например «Выбор значения поиска некоторых опций». Он не поддерживает JQuery-цепочку. Если вы попытаетесь реализовать AJAX, вы заметите, что, когда вы теряете фокус выбранного, введенный текст исчезает, теперь, когда вы нажмете снова, он покажет некоторые значения. Вы можете попытаться удалить эти значения, но это будет трудное время, потому что вы не можете использовать событие 'blur', потому что оно также срабатывает при выборе некоторых значений. Я предлагаю вообще не использовать выбранное, особенно с AJAX.