SORU
12 Temmuz 2011, Salı

Tıklatın olay'dinamik olarak oluşturulan öğeleri üzerinde çalışmıyor

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {

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

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

    </script>
</head>
<body>
    <h2></h2>
    <button>generate new element</button>
</body>
</html>

Sınıf adı test ile yeni bir etiket oluşturmak için düğmeye tıklatarak <h2> olarak çalışıyordum. Ben de bir click olayı test ile ilişkili tanımlanmış. Ama olay işe yaramıyor.

Herkes yardımcı olabilir?

CEVAP
12 Temmuz 2011, Salı

Kullandığınız bağlama denir click() Bir "doğrudan" tek öğeleri işleyicisi iliştirmek olacak bağlamazaten var. Elemanları, gelecekte oluşturulacak bağlı olmaz. Bunu yapmak için, "" on() kullanarak. bağlama temsilci oluşturmanız gerekir

Temsilci olayları daha sonra belge için eklenen alt öğelerini olayları işleyebilir avantajı var.

Source

Aradığınız şey burada:

var counter = 0;

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

// With on():

$("h2").on("click", "p.test", function(){
    alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2></h2>
<button>generate new element</button>

Yukarıdaki kullananlar jQuery sürüm 1.7 için çalışıyor . Eğer eski bir sürümünü kullanıyorsanız, bir önceki cevap için aşağıya bakınız.

Önceki Cevap:

live() kullanmayı deneyin:

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


$(".test").live('click', function(){
    alert('you clicked me!');
});

Benim için çalıştı. JsFiddle ile Tried it.

Ya delegate() ile yapıyor yeni dahiyane bir yolu var:

$("h2").delegate("p", "click", function(){
    alert('you clicked me again!');
});

An updated jsFiddle.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:
DV OlaylarJquery

AYNI ETİKETTEKİ VİDEOLAR

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • 1881 Animation

    1881 Animati

    5 EKİM 2013
  • Film Riot

    Film Riot

    16 NİSAN 2006
  • Troy Hunt

    Troy Hunt

    29 EYLÜL 2011

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR