Ładowanie dynamicznych "wybranych" zaznaczonych elementów

Question

Używam wybranej wtyczki jQuery (przez Harvest). Działa poprawnie na (dokument) .ready, ale mam przycisk, który po kliknięciu używa ajax do dynamicznego tworzenia bardziej wybranych obiektów, które chcę użyć "wybranej" funkcji. Jednak tylko oryginalne wybrane elementy mają "wybrane" funkcje, a nowe (tworzone dynamicznie) nie działają. Używam jQuery.get do dołączania nowych elementów. Oto przykładowy kod:

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 :-(
    }); 
}); 

Myślałam, że muszę gdzieś .live funkcji(), ale nie byłem w stanie zrozumieć, że się jeszcze. Każda pomoc jest doceniana!

Uwaga - Nie próbuję dynamicznie załadować nowe opcje, jak określono w dokumentacji przy użyciutrigger("liszt:updated");

Answer 1

Upewnić się, że response elementy mają klasę select.

console.log(response); // to verify 

Może być także dobrym pomysłem zastosowanie wtyczki do nowego elementu (ów).

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'); 
    }); 
}); 

Ponadto, jeśli /myurl wraca cały dokument HTML, można uzyskać nieprzewidywalne rezultaty.

Answer 2

Miałem podobny problem z Chosen. Próbowałem dynamicznie dodać nowy wybór po kliknięciu łącza przez użytkownika. Sklonowałem poprzedni wybór, a następnie dodałem klon, ale wybrane opcje nie zadziałały. Rozwiązaniem było rozebrać wybranej klasy i dodatkowe elementy, umieścić klon w DOM, a następnie uruchomić wybrany ponownie:

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

Answer 3

jeden sposób można użyć wybraną z 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'); 
}); 

gdzie selectObj jest szczególności wybierz obiekt

Ale ...

Wybrany jest bardzo źle zaimplementowany. Ma kilka błędów wizualnych, takich jak: wybierz opcję, a następnie rozpocznij szukanie nowego, a następnie usuń wybrane i kontynuuj wpisywanie - otrzymasz "Wybierz niektóre opcje" rozszerzone jak "Wybierz opcje wyszukiwania wartości". To nie obsługuje łączenia JQuery. Jeśli spróbujesz zaimplementować AJAX, zauważysz, że gdy stracisz ostrość wybranego, wprowadzony tekst zniknie, teraz po kliknięciu ponownie pojawi się kilka wartości. Możesz spróbować usunąć te wartości, ale będzie to trudny okres, ponieważ nie możesz użyć zdarzenia "rozmycia", ponieważ jest ono również wyzwalane przy wybieraniu niektórych wartości. Sugeruję, aby w ogóle nie używać wybranego, szczególnie w AJAX.

Answer 4

1.- Pobierz Livequery plugin i wywołaj go ze swojej strony.

2.- Zwolnij Kraken: $(".select").livequery(function() { $(this).chosen({}); });

Answer 5

Po kodzie (wypełnić select) .write ten

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

Answer 6

To jest przykład wybranych dynamicznie ładuje nową bazę danych przy użyciu opcji formularza ajax za każdym razem Wybrano kliknięcie.

$('.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"); 
    }); 
});