wybierając elementy dom po html został wstawiony na stronie z ajaxem

Stworzyłem nawigacji zakładki ajax z wstawionym html na stronę. kod wygląda następująco:wybierając elementy dom po html został wstawiony na stronie z ajaxem

$.ajax({ 
     type: 'POST', 
     url: 'main/ajaxjson/load_course_details', 
     data: {page : which, course_id: id}, 
     success: function(home){ 

      $('#ajax-content ').hide(); 
      $('#ajax-content').empty().append(home); 
      $('#ajax-content').fadeIn(); 
     } 

    });

ok ... więc dołączam mój znacznik do mojego html. Teraz muszę wybrać elementy dom z wstawionego html, ale nie mogę. Mam następujący kod:

<a href="javascript:;" class="light-button">Next</a> 
<select id="chapters-select"> 
    <?php foreach ($chapters as $chapter) : ?> 
    <option value="<?php echo $chapter->id; ?>"><?php echo $chapter->title; ?></option> 
    <?php endforeach; ?> 
</select>

Tutaj generuję dynamicznie wybrane opcje. Kiedy próbuję to zrobić:

$('#chapters-select').change(function(){ 
    alert('changed'); 
});

to nie działa. Jak mogę używać javascript po dodaniu html przez ajax?

Źródło

2012-02-27 Mythriel

wydaje się działać dobrze dla mnie: http://jsfiddle.net/fyg6m/ Gdzie jesteś wiążących zdarzenie treser? –

@FelixKling. Napisał, że dodaje treść z 'ajax', więc musi to być wydarzenie związane z delegatem. – gdoron

@gdoron: Prawdopodobnie, ale to by oznaczało, że elementy zostały wybrane * przed * zostały wstawione przez Ajax, co jest sprzeczne z tytułem. Niemniej jednak zgadzam się z tobą. –

Zastosowanie delegat wydarzenie jak on do wersji 1.7+

$('body').on('change', '#chapters-select', function(){ 
    alert('changed'); 
});

celu zwiększenia wydajności zamiast body trzeba napisać najbliższy statyczne (nie dodaje dynamiczny z ajax lub javascript) elementu, który posiada "chapters-select

Jeśli używasz starszej wersji jQuery wybierz odpowiednią metodę z poniższą tabelą:

$(selector).live(events, data, handler);    // jQuery 1.3+ 
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);  // jQuery 1.7+

ondocs:

Kiedy przełącznik jest procedura obsługi zdarzenia jest dalej przekazywane. Program obsługi nie jest wywoływany, gdy zdarzenie występuje bezpośrednio na elemencie bound, ale tylko dla potomków (elementów wewnętrznych) pasujących do selektora. jQuery pę dza zdarzenie od celu zdarzenia do elementu, do którego jest podłĘ ... czony handler (tj. od najbliższego do najbardziej oddalonego elementu) i uruchamia program obsługujĘ ... cy wszystkie elementy wzdłuż tej ś cieżki pasujĘ ... ce do selektora.

Program obsługi zdarzeń jest powiązany tylko z aktualnie zaznaczonymi elementami; one muszą istnieć na stronie w momencie, gdy twój kod wywołuje funkcję .on(). Aby upewnić się, że elementy są obecne i można je wybrać, należy wykonać powiązanie zdarzenia w podpartej instrukcji obsługi dla elementów znajdujących się w kodzie HTML znaczników na stronie. Jeśli do strony wstrzykiwany jest nowy kod HTML, wybierz elementy i dołącz procedury obsługi zdarzeń po umieszczeniu nowego HTML na stronie . Lub użyj delegowanych zdarzeń do dołączenia obsługi zdarzenia , zgodnie z opisem poniżej.

Źródło

2012-02-27 14:03:12 gdoron

Lub po prostu ponownie powiązaj obsługę zdarzeń w wywołaniu zwrotnym dla '$ .ajax'. – Treffynnon

dziękuję. to działa. Nie rozumiem, dlaczego to nie działało wcześniej, ale ja to zbadam – Mythriel

@Treffynnon. zwykle Najlepszą praktyką jest robienie rzeczy tylko raz i tylko w jednym miejscu. – gdoron

Uruchom to jednokrotnie, po pierwszym załadowaniu strony.

$("body").delegate('#chapters-select','change', function(){ 
    alert('changed'); 
});

To odpowiednik użytkownika @ gdoron odpowiedź, ale jest kompatybilny z wersjami jQuery starsze niż 1.7

Źródło

2012-02-27 14:04:40 wheresrhys

wybierając elementy dom po html został wstawiony na stronie z ajaxem

Odpowiedz

Powiązane problemy