Użyj .on() Metoda z delegowanymi zdarzeniami

$('#staticParent').on('click', '.dynamicElement', function() {
    // Do something on an existent or future .dynamicElement
});

The .on() metoda pozwala na delegowanie dowolnej funkcji obsługi zdarzeń do:
bieżące elementy lub przyszłe elementy dodane do DOM w późniejszym czasie.

_{P. S: nie używaj .live()! Od jQuery 1.7 + Metoda .live() jest przestarzała.}

Powód:

W jQuery Zdarzenie Click() wiąże element tylko wtedy, gdy dany element istnieje w kodzie Html (po załadowaniu strony).

Nie będzie uwzględniał przyszłych elementów, które są tworzone dynamicznie (element przyszłości). Elementy dynamiczne są tworzone przy pomocy javascript lub jquery (Nie w Html) .

Więc normalne Zdarzenie kliknięcia nie będzie uruchamiane na elemencie dynamicznym.

Rozwiązanie:

Aby to przezwyciężyć powinniśmy użyć on () funkcja. on () może delegować Zdarzenie zarówno dla obecnych, jak i przyszłych elementów.

Delegate (), live () i on () mają przewagę nad elementami DOM.

Delegate () i live () są przestarzałe(nie używaj ich).

Na {[4] } może wyzwalać tylko istniejące i przyszłe elementy.

Na można rozważyć wszystkie elementy, które są obecne na całej stronie.

Należy użyć w funkcji, Aby wywołać zdarzenie na dynamicznie (przyszłych) tworzonych elementach.

Usuń kod z $(document).gotowe:

$(".test").click(function(){

  alert();

});

Zmień na:

$(document).on('click','.test',function(){

  alert('Clicked');

});

Dodaj tę funkcję do pliku js. będzie działać na każdej przeglądarce

$(function() {
    $(document).on("click", '#mydiv', function() {
        alert("You have just clicked on ");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='mydiv'>Div</div>

Zmień

 $(".test").click(function(){

Do

 $(".test").live('click', function(){

LIVE DEMO

JQuery .live()

Musisz użyć .live to działa:

$(".test").live("click", function(){
   alert();
});

Lub jeśli używasz jquery 1.7 + użyj .na :

$(".test").on("click", "p", function(){
   alert();
});

Try .live() or .delegate()

Http://api.jquery.com/live/

Http://api.jquery.com/delegate/

Twój element .test został dodany po metodzie .click(), więc nie miał do niego dołączonego zdarzenia. Live i Delegate dają WYZWALACZ tego zdarzenia elementom nadrzędnym, które sprawdzają ich dzieci, więc wszystko dodane później nadal działa. Myślę, że Live sprawdzi całą treść dokumentu, podczas gdy Delegat może być nadany elementowi, więc Delegat jest bardziej wydajny.

Więcej informacji:

Http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

Najlepszy sposób zastosowania zdarzenia na dynamicznie generowanej zawartości za pomocą delegowania.

$(document).on("eventname","selector",function(){
    // code goes here
});

Więc Twój kod jest teraz taki

$(document).on("click",".test",function(){
    // code goes here
});

Znalazłem dwa rozwiązania w dokumentacji jQuery:

Po pierwsze: użyj delegata na ciele lub dokumencie

Np:

 $("body").delegate('.test', 'click', function(){
 ...
  alert('test');
 });

Odpowiedź: Dołącz obsługę do jednego lub więcej zdarzeń dla wszystkich elementów pasujących do selektora, teraz lub w przyszłości, w oparciu o określony zestaw elementów głównych. link: http://api.jquery.com/delegate/

Po Drugie: Umieść swoją funkcję w "$ (document) ", używając " on " i dołącz ją do element, który chcesz wywołać. Pierwszy parametr to "obsługa zdarzeń", drugi: element, a trzeci: funkcja. Np.:

 $( document ).on( 'click', '.test', function () {
 ...
  alert('test');
 });

Odpowiedź: procedury obsługi zdarzeń są powiązane tylko z aktualnie wybranymi elementami; muszą istnieć na stronie w momencie, gdy twój kod wywoła .on () . Aby upewnić się, że elementy są obecne i mogą być zaznaczone, wykonaj powiązanie zdarzeń wewnątrz modułu obsługi gotowego dokumentu dla elementów, które są w znaczniki HTML na stronie. Jeśli nowy HTML jest wprowadzany do strony, Zaznacz elementy i dołącz procedury obsługi zdarzeń po umieszczeniu nowego HTML na stronie. Możesz też użyć zdarzeń delegowanych, aby dołączyć obsługę zdarzenia, zgodnie z poniższym opisem ... link: https://api.jquery.com/on/

$(.surrounding_div_class).on( 'click', '.test', function () {
alert( 'WORKS!' );
});

Będzie działać tylko wtedy, gdy DIV z klasą .surrounding_div_class jest bezpośrednim rodzicem obiektu .test

Jeśli w div znajduje się inny obiekt, który będzie wypełniony, to nie zadziała.

Problem polega na tym, że próbujesz powiązać klasę "test" ze zdarzeniem, zanim pojawi się coś z klasą "test" w DOM. Chociaż może się wydawać, że to wszystko jest dynamiczne, to tak naprawdę dzieje się to, że JQuery przechodzi przez DOM i łączy Zdarzenie kliknij, gdy uruchomiona jest funkcja ready(), co dzieje się przed utworzeniem "Kliknij mnie" w zdarzeniu przycisku.

Dodając Zdarzenie" test "Click do przycisku" button " click handler, spowoduje on podłączenie go po poprawny element istnieje w DOM.

<script type="text/javascript">
    $(document).ready(function(){                          
        $("button").click(function(){                                  
            $("h2").html("<p class='test'>click me</p>")                          
            $(".test").click(function(){                          
                alert()                          
            });       
        });                                     
    });
</script>

Użycie live() (jak zauważyli inni) jest innym sposobem, aby to zrobić, ale uznałem, że dobrym pomysłem było również zwrócenie uwagi na drobny błąd w kodzie JS. To, co napisałeś, nie było złe, po prostu musiało być poprawnie ustawione. Uchwycenie, jak działa DOM i JS, jest jedną z trudniejszych rzeczy dla wielu tradycyjnych programistów do owinięcia głowy.

live() jest czystszym sposobem radzenia sobie z tym iw większości przypadków jest prawidłowy sposób. Informatyka zasadniczo jest oglądanie DOM i ponowne okablowanie rzeczy za każdym razem, gdy elementy w nim się zmieniają.

.funkcja live działa świetnie.

Służy do dynamicznego dodawania elementów do sceny.

$('#selectAllAssetTypes').live('click', function(event){
                    alert("BUTTON CLICKED");
                    $('.assetTypeCheckBox').attr('checked', true);
                });

JQuery .on Działa ok, ale miałem pewne problemy z renderowaniem implementującym niektóre z powyższych rozwiązań. Mój problem z użyciem .on polega na tym, że w jakiś sposób renderował zdarzenia inaczej niż metoda .hover.

Ponownie zarejestruj Zdarzenie hover, ponieważ hover nie działa dla dynamicznie tworzonych elementów. więc za każdym razem kiedy tworzę nowy / dynamiczny element dodaję kod hover ponownie. działa doskonale

$('#someID div:last').hover(
    function() {
       //...
    },
    function() {
       //...
    }
);

Pracuję z tabelami dodającymi do nich nowe elementy dynamicznie, a gdy używam on (), jedynym sposobem na to, aby to działało, jest użycie nie dynamicznego rodzica jako:

<table id="myTable">
    <tr>
        <td></td> // Dynamically created
        <td></td> // Dynamically created
        <td></td> // Dynamically created
    </tr>
</table>

<input id="myButton" type="button" value="Push me!">

<script>
    $('#myButton').click(function() {
        $('#myTable tr').append('<td></td>');
    });

    $('#myTable').on('click', 'td', function() {
        // Your amazing code here!
    });
</script>

Jest to bardzo przydatne, ponieważ aby usunąć zdarzenia związane z on () , możesz użyć off () , a aby użyć zdarzeń raz, możesz użyć one () .

Nie mogłem dostać live lub delegat do pracy na div w lightbox (tinybox).

Użyłem setTimeout pomyślnie, w następujący prosty sposób:

$('#displayContact').click(function() {
    TINY.box.show({html:'<form><textarea id="contactText"></textarea><div id="contactSubmit">Submit</div></form>', close:true});
    setTimeout(setContactClick, 1000);
})

function setContactClick() {
    $('#contactSubmit').click(function() {
        alert($('#contactText').val());
    })
}

Możesz również użyć onclick="do_something(this)"wewnątrz elementu

Jeśli masz dinamowo dodany link do jakiegoś pojemnika lub body:

var newLink= $("<a></a>", {
        "id": "approve-ctrl",
        "href": "#approve",
        "class": "status-ctrl",
        "data-attributes": "DATA"
    }).html("Its ok").appendTo(document.body);

Możesz wziąć jego surowy element javascript i dodać do niego detektor zdarzeń, jak click :

newLink.get(0).addEventListener("click", doActionFunction);

Bez względu na to, ile razy dodajesz nową instancję linku, możesz jej używać tak, jakbyś używał funkcji jquery click.

function doActionFunction(e) {
    e.preventDefault();
    e.stopPropagation();

    alert($(this).html());
}

Więc otrzymasz wiadomość mówiącą

Its ok

Ma lepszą wydajność niż inne alternatywy.

Extra: możesz uzyskać lepszą wydajność unikając jquery i używając zwykłego javascript. Jeśli używasz IE do wersji 8 powinieneś użyć tego polyfill, aby użyć metody addEventListener

if (typeof Element.prototype.addEventListener === 'undefined') {
    Element.prototype.addEventListener = function (e, callback) {
      e = 'on' + e;
      return this.attachEvent(e, callback);
    };
  }

Alternatywną i bardziej zwięzłą alternatywą (IMHO) jest użycie surowej funkcji javascript, która reaguje na zdarzenie on click, a następnie przekazanie elementu docelowego z powrotem do jQuery, jeśli chcesz. Zaletą tego podejścia jest to, że możesz dynamicznie dodawać swój element w dowolnym miejscu, a obsługa kliknięć będzie "po prostu działać" i nie musisz się martwić o delegowanie kontroli do elementów nadrzędnych itd.

Krok 1: zaktualizuj dynamiczny html, aby uruchomić Zdarzenie onclick. Upewnij się, że przekazać obiekt "event" jako argument

    $("button").click(function() {
        $("h2").html("<p class='test' onclick='test(event)'> click me </p>")
    });

Krok 2: Utwórz funkcję testową, aby odpowiedzieć na zdarzenie kliknięcia

    function test(e){
        alert();
    });

Opcjonalny krok 3: biorąc pod uwagę, że używasz jQuery, zakładam, że przydatne będzie uzyskanie odniesienia do przycisku source

    function test(e){
        alert();

        // Get a reference to the button
        // An explanation of this line is available here
        var target = (e.target)? e.target : e.srcElement;

        // Pass the button reference to jQuery to do jQuery magic
        var $btn = $(target);

    });

Można dodawać po kliknięciu do dynamicznie tworzonych elementów. Przykład poniżej. Używając kiedy, aby upewnić się, że jest zrobione. W moim przykładzie chwytam div z klasą expand, dodając" Kliknij, aby zobaczyć więcej " span, a następnie używając tego zakresu, aby ukryć / pokazać oryginalny div.

$.when($(".expand").before("<span class='clickActivate'>Click to see more</span>")).then(function(){
    $(".clickActivate").click(function(){
        $(this).next().toggle();
    })
});

Użyj 'on', gdy kliknięcie spowoduje powiązanie z elementami już obecnymi.

Dla NP

$('test').on('click',function(){
    alert('Test');
})