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:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • ravinderosahn

    ravinderosah

    20 Temmuz 2009
  • SolidWorksTutoriels

    SolidWorksTu

    14 Kasım 2013
  • stewmurray47

    stewmurray47

    1 Kasım 2006