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

  • Curso Online Gratuito

    Curso Online

    4 Aralık 2011
  • Edge-CGI 3D Tutorials and more!

    Edge-CGI 3D

    11 HAZİRAN 2013
  • We've moved!

    We've moved!

    7 Ocak 2008

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR