jQuery Açık Tıklanmadı

Question

Olay işleyicimin tetiklenmesinde sorun yaşıyorum. JSON'u aşağıdaki sayfaya çağırıyorum. Daha sonra, 'merhaba' uyarısını yürütecek olan oluşturduğum düğmelerden birine tıklamak istiyorum. Sayfadaki diğer tüm öğelerle çalışır, ancak <button>.

Herkes yardımcı olabilir mi?

test.js

$(document).ready(function() { 
    $.getJSON('/api/v1/recipe/?format=json', function(data) { 
    $.each(data.objects, function(i, recipe) { 
     $('table#recipes').append('<tr><td>' + recipe.title + '</td><td>' + recipe.ingredients + '</td><td>' + recipe.method + '</td><td><button class="btn" type="button" id="rmv">remove</button></td></tr>'); 
     }); 
    }); 

    $('rmv').on('click', function() { 
     alert('hello there!'); 
    }); 
    }); 

recipe.html

{% extends 'base.html' %} 

{% block content %} 
<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span6"> 
     <form action='' method="post">{% csrf_token %} 
     {{ form.as_p }} 
     <input type="submit" value="go baby!"> 
     </form> 
    </div> 
    <div class="span6"> 
     <table class="table table-striped table-bordered" id="recipes"> 
     <tr> 
      <th>Title</th> 
      <th>Ingredients</th> 
      <th>Method</th> 
      <th>Remove</th> 
     </tr> 
     </table> 
    </div> 
    </div> 
</div> 
{% block recipes %}{% endblock recipes %} 
{% endblock content %} 

Answer 1

bunu

$('#rmv') 

olmalıdır yanlış seçici var ve ekleme eğer dinamik olarak eleman gerekir gibi kullanabilirsiniz

$(document).on('click','#rmv',function(e) { 
    //handler code here 
}); 

@Alnitak belirtildiği gibi CDE

$.getJSON('/api/v1/recipe/?format=json', function(data) { 
    $.each(data.objects, function(i, recipe) { 
    $('table#recipes').append('<tr><td>' + recipe.title + '</td><td>' + recipe.ingredients + '</td><td>' + recipe.method + '</td><td><button class="btn rmv" type="button" >remove</button></td></tr>'); 
    }); 
}); 

değiştirdikten sonra gibi sınıf seçicisi geçebilirsiniz böylece muhtemelen yanlış yinelenen kimlikleri ile elemanlarını üretecek geri ajax başarı çağrısında sizin döngü

ve

$(document).on('click','.rmv',function(e) { 
    //handler code here 
}); 

Answer 2

bu deneyin gibi seçici bakacağız. callback

$(document).ready(function() { 
     $.getJSON('/api/v1/recipe/?format=json', function(data) { 
      $.each(data.objects, function(i, recipe) { 
       $('table#recipes').append('<tr><td>' + recipe.title + '</td><td>' + recipe.ingredients + '</td><td>' + recipe.method + '</td><td><button class="btn" type="button" id="rmv">remove</button></td></tr>'); 
      }); 

     $('#rmv').on('click', function() { 
      alert('hello there!'); 
     }); 
     }); 


    }); 

içine bu kodu taşı VEYA ajax isteği başarısı fonksiyonunda olay işleyicisi ekleyin jQuery.on

$(document).on("click", "#rmv",function() { 
       alert('hello there!'); 
      }); 

Answer 3

$.getJSON('/api/v1/recipe/?format=json', function(data) { 
      $.each(data.objects, function(i, recipe) { 
       $('table#recipes').append('<tr><td>' + recipe.title + '</td><td>' + recipe.ingredients + '</td><td>' + recipe.method + '</td><td><button class="btn" type="button" id="rmv">remove</button></td></tr>'); 
      }); 
      $('rmv').on('click', function() { 
       alert('hello there!'); 
      }); 
     }); 

kullanın.

Düzen - senin seçici rmv yanlıştır başkaları gereğince, #rmv

Answer 4

Birincisi, ID rmv birden fazla unsur orada değil emin olmalıdır. Kimliklerin benzersiz olması gerekir, ancak her biri kendi "kaldır" düğmesiyle birden fazla yemek tarifi ekliyor gibi görünüyorsunuz.

Ayrıca olay işleyici kaydınızla ilgili sorunlarınız var - olay işleyicisini kaydetmeden önce AJAX çağrısının bitmesini (ve ardından tablo satırını eklemesini) beklemiyorsunuz.

Bu

AJAX success callback'inde içinde olay işleyicisi kaydederek çözüldü, ancak kimliğine sahip ilk sorunu verilebilir, daha iyi bir çözüm yerine bir kimliği bir sınıf ( .rmv) kullanmak olacaktır ve daha sonra kullanın:

o olay heyet kullanması nedeniyle

$('#recipes').on('click', '.rmv', function() { 
    var $tr = $(this).closest('tr'); 
    // do something with the current row 
}); 

yukarıdaki kod success callback'inde dışında kaydedilebilir. Olayı, oluşturuldukları her düğmenin üzerine doğrudan kaydetmek yerine, kapatma tablosuna (zaten var olan) ulaşan click olayına dayanır.

Answer 5

$('#rmv', table).on('click', function(){ 
    alert('hello there!'); 
}); 

Answer 6

jQuery işlevi herhangi bir çağrı tetiklemek için bir öğenin id kullanıyorsanız eklenecek bir '#' sembolü gerektirir. Yani

$('#rmv').on('click', function() { 
     alert('hello there!'); 
    });