$ (document) .on ("click" ... funktioniert nicht?

Gibt es einen bekannten Fehler, den ich hier machen könnte?

Ich habe ein Skript, das .on () verwendet, weil ein Element dynamisch generiert wird und nicht funktioniert. Um es auszuprobieren, habe ich den Selektor durch den Wrap des dynamischen Elements ersetzt, der statisch ist und immer noch nicht funktioniert hat! Als ich zu einfachem altem .click für den Wrap wechselte, funktionierte es jedoch.
(Dies funktioniert offensichtlich nicht für das dynamische Element, das wichtig ist.)

Das funktioniert:

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

Das geht nicht:

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

AKTUALISIEREN:

Ich habe mit der rechten Maustaste geklickt und "Element überprüfen" in Chrome ausgeführt, um nur etwas zu überprüfen. Danach hat das Klickereignis funktioniert. Ich habe mich aktualisiert und es hat nicht funktioniert, das Element inspiziert und dann hat es funktioniert. Was bedeutet das?

Sie verwenden die richtige Syntax für die Bindung an das Dokument, um auf ein Klickereignis für ein Element mit id = "test-element" zu warten.

Es funktioniert wahrscheinlich nicht aufgrund einer der folgenden Ursachen:

• Keine aktuelle Version von jQuery verwenden
• Wickeln Sie Ihren Code nicht in DOM ein
• oder Sie tun etwas, das dazu führt, dass das Ereignis nicht zum Listener im Dokument sprudelt.

Um Ereignisse für Elemente zu erfassen, die NACH dem Deklarieren Ihrer Ereignis-Listener erstellt wurden, sollten Sie an ein übergeordnetes Element oder ein Element in einer höheren Hierarchie binden.

Zum Beispiel:

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

In diesem Beispiel wird nur die Warnung "An Dokument gebunden" ausgelöst.

JSFiddle mit jQuery 1.9.1

Ihr Code sollte funktionieren, aber mir ist bewusst, dass die Antwort Ihnen nicht hilft. Sie können hier ein funktionierendes Beispiel sehen (jsfiddle) .

Jquery:

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

Wie bereits erwähnt, verwenden Sie anstelle einer Klasse eine ID. Wenn Sie mehr als ein Element auf der Seite mit einer ID haben, gibt jquery nur das erste Element mit dieser ID zurück . Es wird keine Fehler geben, denn so funktioniert es. Wenn dies das Problem ist, werden Sie feststellen, dass das Klickereignis für das erste, test-elementjedoch nicht für das folgende Ereignis funktioniert .

Wenn dies die Symptome des Problems nicht genau beschreibt, ist Ihr Selektor möglicherweise falsch. Ihr Update lässt mich glauben, dass dies der Fall ist, weil ich ein Element inspiziere, dann erneut auf die Seite klicke und den Klick auslöse. Dies könnte dazu führen, dass Sie den Ereignis-Listener auf den tatsächlichen documentanstatt auf den tatsächlichen setzen test-element. Wenn dies der Fall ist, wird das Ereignis ausgelöst, wenn Sie auf das Dokument klicken und es wieder aktivieren (z. B. vom Entwicklerfenster zurück zum Dokument). In diesem Fall werden Sie auch feststellen, dass das Klickereignis ausgelöst wird, wenn Sie zwischen zwei verschiedenen Registerkarten klicken (da es sich um zwei verschiedene Registerkarten handelt documentund Sie daher auf das Dokument klicken.

Wenn beides nicht die Antwort ist, trägt das Posten von HTML wesentlich dazu bei, dies herauszufinden.

Ein alter Beitrag, den ich aber gerne teile, da ich den gleichen Fall habe, aber endlich das Problem kannte:

Das Problem ist: Wir machen eine Funktion für die Arbeit mit einem bestimmten HTML-Element, aber das mit dieser Funktion verbundene HTML-Element ist noch nicht erstellt (da das Element dynamisch generiert wurde). Damit es funktioniert, sollten wir die Funktion gleichzeitig mit dem Erstellen des Elements erstellen. Element zuerst als Funktion damit verbunden machen.

Einfach gesagt, eine Funktion funktioniert nur mit dem Element, das vor ihr erstellt wurde (er). Alle Elemente, die dynamisch erstellt wurden, bedeuten nach ihm.

Bitte überprüfen Sie dieses Muster, das den obigen Fall nicht beachtet hat:

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

Dynamisch angehängt:

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

Diese Funktion funktioniert gut, wenn Sie auf die Schaltfläche klicken:

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

oder Sie können Körper wie verwenden:

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

Vergleiche damit, dass es nicht funktioniert:

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

hoffe es wird helfen

Das funktioniert:

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

Hier ist die Geige

Versuche dies:

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

Die Art und Weise, wie Dokumente erstellt werden, ist ebenfalls seltsam. Das wäre für mich sinnvoll, wenn es für einen Klassenselektor verwendet würde, aber im Fall einer ID haben Sie wahrscheinlich nur nutzloses DOM, das dort durchläuft. Im Fall des ID-Selektors erhalten Sie dieses Element sofort.