Wywołanie Jquery po otworzeniu SELECT-a, Dynamiczne ładowanie Selektów i jQuery po załadowaniu nowego Selekta Opcje

[doktorek]

Hej

Mam dziwny problem...

Mam kilka rozwijanych <select></select>
Są one ładowane po kolei - po wybraniu pierwszego selekta - ładuje się kolejny.
ładowanie odbywa się przez javascript onChange=wgraj_kolejny()

Ale... problem jest taki, że jest jeszcze jeden skrypt jquery, który jest ładowany na starcie strony i on upiększa te selekty...
Ale upiększa tylko ten pierwszy, który jest widoczny na starcie.

Aby upiększył kolejny, który jest ładowany po wybraniu pierwszego należy go wywołać raz jeszcze.

I teraz jak zrobiłem sobie skrypt, który wywołuje to jquery w momencie kliknięcia na <select> to działa
Ale nie działa kiedy kliknę na <select>, którego to jquery dotyczy... np.

Jak otworze selekt o id '#testowy' to jquery dziala i $("#drugi").customselect(); wywoluje sie poprawnie.
Ale jak otworze selekt o id '#drugi' to juz nie dziala

<select id="testowy" class="test">
<option value="1">1</option>
<option value="2">2</option>
</select>

<script type="text/javascript">
$('#testowy').click(function(){
$("#drugi").customselect();
});
</script>

<script type="text/javascript">
$('#drugi').click(function(){
$("#drugi").customselect();
});
</script>

[nospor]

Precierz #drugi nie istnieje po zaladowaniu strony wiec trudno oczekiwac by sie zdarzenie podpielo pod cos co nie instnieje.
Albo poczytaj o ON albo odpalaj upiekrzanie po zaladowaniu sie danego ajaxa

[doktorek]

Na tym polega problem...
Że jak selekt jest już załadowany...
To nawet jak mam prostą funkcję


$('#drugi').click(function(){
$("#drugi").customselect();
});


To nie działa

Ale ... jak wywołam

$('#trzeci').click(function(){
$("#drugi").customselect();
});

To działa

Nie działa wywołanie z tego ID funkcji, która ma na tym samym ID coś wykonać

Pytanie jak załadować jquery po wgraniu innego ajaxa ?
Bo ładowanie jest nie przez jquery tylko

if(XMLHttpRequestObject) {
var lista = document.getElementById('pierwszy');
var tekstId = parseInt(lista[lista.selectedIndex].value);
XMLHttpRequestObject.open("GET", "zaladuj.php?id=" + tekstId);
XMLHttpRequestObject.onreadystatechange = function()
{
if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
var div = document.getElementById('drugi');
div.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}

[nospor]

Kod

...
if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
var div = document.getElementById('drugi');
div.innerHTML = XMLHttpRequestObject.responseText;
$("#drugi").customselect();
}
.....

ps: zdajesz sobie sprawe z dziwnosci faktu iz ajax lecisz po czystym js a reszte po jquery?

[doktorek]

O matko...

Kiedyś wyczytałem, że nie można łączyć Jquery w czystym js.
Dlatego nawet nie próbowałem tego załadować po wrzuceniu do diva...

Co prawda przepiszę to wszystko ja jquery ale... zaskoczony jestem

Dziękuję za pomoc zatem.

Działa...

[gitbejbe]

jest jeszcze coś takiego jak "delegate" w jquery. Za pomocą tego dynamicznie sprawdzasz wskazane elementy - również te które dopiero będą wygenerowane.

.klasa_select -> twoja nazwa klasy identycznej dla każdego selekta którego chcesz przystroić

[PHP] pobierz, plaintext 
$("body").delegate(".klasa_select", "click", function(){
 
       var element = $(this);
 
       // prosty filtr aby wykonać tylko raz akcje dla jednego elementu
       if(element.attr('active') == false) {
             element.customselect();
             element.attr('active', true);
       }
 
});
[PHP] pobierz, plaintext 

i to by było na tyle jeśli chodzi o Twój problem : )

Ten post edytował gitbejbe 24.09.2016, 21:47:19

[viking]

Nie ucz złych nawyków i przestarzałych metod. Delegate już dawno został zastąpiony przez .on i aż dziwne ze w jquery3 jest oznaczony jako deprecated zamiast po prostu wylecieć.

https://prophp.pl/article/15/jquery%2C_zdar...e_metoda_%24.on