$ (dokument) .on („klik”… nie działa?

Czy jest jakiś dobrze znany błąd, który mógłbym tutaj popełnić?

Mam skrypt, który używa .on (), ponieważ element jest generowany dynamicznie i nie działa. Aby to przetestować, zastąpiłem selektor zawijaniem elementu dynamicznego, który jest statyczny i nadal nie działa! Kiedy jednak przełączyłem się na zwykły stary plik .click, aby zawinąć, zadziałało.
(To oczywiście nie zadziała w przypadku elementu dynamicznego, tego, który ma znaczenie).

To działa:

$("#test-element").click(function() {
    alert("click");
});

To nie:

$(document).on("click","#test-element",function() {
    alert("click");
});

AKTUALIZACJA:

Kliknąłem prawym przyciskiem myszy i wykonałem „Sprawdź element” w przeglądarce Chrome, aby coś dokładnie sprawdzić, a potem zdarzenie kliknięcia zadziałało. Odświeżyłem się i nie działało, sprawdziłem element, a potem zadziałało. Co to znaczy?

Używasz poprawnej składni do tworzenia powiązania z dokumentem w celu nasłuchiwania zdarzenia kliknięcia elementu o identyfikatorze = "test-element".

Prawdopodobnie nie działa z jednego z następujących powodów:

• Nie używasz najnowszej wersji jQuery
• Brak pakowania kodu w DOM gotowy
• lub robisz coś, co powoduje, że zdarzenie nie jest widoczne dla słuchacza w dokumencie.

Aby przechwytywać zdarzenia w elementach, które są tworzone PO zadeklarowaniu detektorów zdarzeń - należy powiązać się z elementem nadrzędnym lub elementem znajdującym się wyżej w hierarchii.

Na przykład:

$(document).ready(function() {
    // This WILL work because we are listening on the 'document', 
    // for a click on an element with an ID of #test-element
    $(document).on("click","#test-element",function() {
        alert("click bound to document listening for #test-element");
    });

    // This will NOT work because there is no '#test-element' ... yet
    $("#test-element").on("click",function() {
        alert("click bound directly to #test-element");
    });

    // Create the dynamic element '#test-element'
    $('body').append('<div id="test-element">Click mee</div>');
});

W tym przykładzie zostanie uruchomiony tylko alert „powiązany z dokumentem”.

JSFiddle z jQuery 1.9.1

Twój kod powinien działać, ale wiem, że odpowiedź ci nie pomoże. Możesz zobaczyć działający przykład tutaj (jsfiddle) .

JQuery:

$(document).on('click','#test-element',function(){
    alert("You clicked the element with and ID of 'test-element'");
});

Jak ktoś już zauważył, zamiast klasy używasz identyfikatora. Jeśli masz więcej niż jeden element na stronie o identyfikatorze, jquery zwróci tylko pierwszy element o tym identyfikatorze . Nie będzie żadnych błędów, bo tak to działa. Jeśli na tym polega problem, zauważysz, że zdarzenie kliknięcia działa w przypadku pierwszego, test-elementale nie w przypadku kolejnych.

Jeśli to nie opisuje dokładnie objawów problemu, być może Twój selektor się myli. Twoja aktualizacja prowadzi mnie do wniosku, że dzieje się tak z powodu sprawdzenia elementu, a następnie ponownego kliknięcia strony i uruchomienia kliknięcia. Może to powodować, jeśli umieścisz detektor zdarzeń na rzeczywistym documentzamiast test-element. Jeśli tak, po kliknięciu dokumentu i ponownym włączeniu (jak z okna programisty z powrotem do dokumentu) zdarzenie zostanie wyzwolone. W takim przypadku zauważysz również, że zdarzenie kliknięcia jest wywoływane, gdy klikniesz między dwiema różnymi kartami (ponieważ są to dwie różne karty documenti dlatego klikasz dokument.

Jeśli żadna z tych odpowiedzi nie jest odpowiedzią, publikowanie HTML znacznie ułatwi zrozumienie tego problemu.

Stary post, ale uwielbiam się dzielić, bo mam ten sam przypadek, ale w końcu poznałem problem:

Problem polega na tym, że tworzymy funkcję do pracy z określonym elementem HTML, ale element HTML powiązany z tą funkcją nie został jeszcze utworzony (ponieważ element został wygenerowany dynamicznie). Aby to zadziałało, powinniśmy wykonać funkcję w tym samym czasie, gdy tworzymy element. Najpierw element, niż powiązanie z nim funkcji.

Mówiąc najprościej, funkcja będzie działać tylko w elemencie, który ją utworzył (nim). Wszelkie elementy, które tworzyły się dynamicznie, oznaczają po nim.

Ale proszę sprawdzić tę próbkę, która nie uwzględniła powyższego przypadku:

<div class="btn-list" id="selected-country"></div>

Dołączane dynamicznie:

<button class="btn-map" data-country="'+country+'">'+ country+' </button>

Ta funkcja działa dobrze, klikając przycisk:

$(document).ready(function() {    
        $('#selected-country').on('click','.btn-map', function(){ 
        var datacountry = $(this).data('country'); console.log(datacountry);
    });
})

lub możesz użyć body jak:

$('body').on('click','.btn-map', function(){ 
            var datacountry = $(this).data('country'); console.log(datacountry);
        });

porównaj z tym, że nie działa:

$(document).ready(function() {     
$('.btn-map').on("click", function() { 
        var datacountry = $(this).data('country'); alert(datacountry);
    });
});

mam nadzieję, że to pomoże

To działa:

<div id="start-element">Click Me</div>

$(document).on("click","#test-element",function() {
    alert("click");
});

$(document).on("click","#start-element",function() {
    $(this).attr("id", "test-element");
});

Oto Fiddle

Spróbuj tego:

$("#test-element").on("click" ,function() {
    alert("click");
});

Dokumentowy sposób robienia tego również jest dziwny. Miałoby to dla mnie sens, gdyby zostało użyte jako selektor klasy, ale w przypadku id prawdopodobnie masz po prostu bezużyteczny przechodzenie tam przez DOM. W przypadku selektora id otrzymujesz ten element natychmiast.