$ (document) .on ("tıklama"… çalışmıyor mu?

Burada yapabileceğim iyi bilinen bir hata var mı?

.On () kullanan bir komut dosyam var çünkü bir öğe dinamik olarak oluşturuldu ve çalışmıyor. Sadece test etmek için, seçiciyi dinamik öğenin statik olan sarmalamasıyla değiştirdim ve yine de çalışmadı! Düz eski .click'e geçtiğimde, yine de işe yaradı.
(Açıkçası bu, önemli olan dinamik öğe için işe yaramayacaktır.)

Bu çalışıyor:

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

Bu değil:

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

GÜNCELLEME:

Bir şeyi iki kez kontrol etmek için sağ tıklayıp Chrome'da "Öğeyi İncele" yi yaptım ve ardından tıklama etkinliği çalıştı. Yeniledim ve çalışmadı, öğeyi inceledim ve sonra çalıştı. Ne anlama geliyor?

İd = "test-element" olan bir öğeye ilişkin tıklama olayını dinlemek üzere belgeye bağlanmak için doğru sözdizimini kullanıyorsunuz.

Muhtemelen şunlardan biri nedeniyle çalışmıyor:

• JQuery'nin son sürümünü kullanmamak
• Kodunuzu DOM'a hazır hale getirmemek
• veya olayın belgedeki dinleyiciye köpürmemesine neden olan bir şey yapıyorsunuz.

Olay dinleyicilerinizi bildirdikten SONRA oluşturulan öğeler üzerindeki olayları yakalamak için - bir ana öğeye veya hiyerarşide daha üstteki öğeye bağlamalısınız.

Örneğin:

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

Bu örnekte, yalnızca "belgeye bağlı" uyarısı tetiklenecektir.

JQuery 1.9.1 ile JSFiddle

Kodunuz çalışmalıdır, ancak cevabın size yardımcı olmadığının farkındayım. Burada çalışan bir örnek görebilirsiniz (jsfiddle) .

Jquery:

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

Birinin daha önce belirttiği gibi, sınıf yerine bir kimlik kullanıyorsunuz. Sayfada bir kimliği olan birden fazla öğeniz varsa, jquery yalnızca bu kimliğe sahip ilk öğeyi döndürür . Herhangi bir hata olmayacak çünkü böyle çalışıyor. Sorun buysa, tıklama olayının ilki için çalıştığını, test-elementancak takip edenlerde olmadığını fark edeceksiniz .

Bu, sorunun belirtilerini doğru bir şekilde tanımlamıyorsa, seçiciniz yanlış olabilir. Güncellemeniz, bir öğeyi inceledikten sonra sayfayı tekrar tıklayıp tıklamayı tetiklediğim için durumun böyle olduğuna inanmamı sağlıyor. Bunun nedeni olay dinleyicisini documentyerine gerçek olana koymanız olabilir test-element. Öyleyse, belgeyi tıklayıp tekrar açtığınızda (geliştirici penceresinden belgeye geri döndüğünüzde olduğu gibi) olay tetiklenecektir. Bu durumda, iki farklı sekme arasına tıkladığınızda da tıklama olayının tetiklendiğini fark edeceksiniz (çünkü bunlar iki farklı documents ve bu nedenle belgeyi tıklıyorsunuz.

Bunların hiçbiri cevap değilse, HTML yayınlamak, onu bulmak için uzun bir yol kat edecektir.

Eski bir gönderi, ama aynı davaya sahip olduğum için paylaşmayı seviyorum ama sonunda sorunu anladım:

Problem şu: Belirtilen bir HTML elemanıyla çalışacak bir işlev yapıyoruz, ancak bu işlevle ilgili HTML elemanı henüz yaratılmadı (çünkü eleman dinamik olarak oluşturulmuştu). Çalışması için elementi yaratırken aynı zamanda fonksiyonu da yapmalıyız. Onunla ilgili işlev yapmaktan önce eleman.

Basitçe ifade edersek, bir işlev yalnızca ondan önce yaratılan öğeye (ondan) çalışır. Dinamik olarak yaratılan her unsur ondan sonra demektir.

Ancak lütfen yukarıdaki durumu dikkate almayan bu örneği inceleyin:

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

Dinamik olarak eklendi:

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

Bu işlev, düğmeye tıklandığında iyi çalışıyor:

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

veya şu şekilde vücut kullanabilirsiniz:

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

çalışmayanla karşılaştırın:

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

umarım yardımcı olur

Bu çalışıyor:

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

İşte Fiddle

Bunu dene:

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

Bunu yapmanın belge yolu da tuhaf. Bir sınıf seçici için kullanılırsa bu bana mantıklı gelir, ancak bir id söz konusu olduğunda muhtemelen orada sadece işe yaramaz bir DOM geçişi olur. Kimlik seçici durumunda, o öğeyi anında alırsınız.