がクリックで動的に作成された要素で期待どおりに機能しないjQuery

Question

クリックしたときにタグがあると、タグのデータ値を警告します。それはうまく動作しますが、動的に作成された要素をクリックしても機能しません。以下は

<img id="no_p_fav" src="http://localhost:8000/icons/non_star.png"> 

要素を作成しますが、ページがロードされたときがあった要素に正常に動作します私は動的に動作しません

$('.all_candidate_bar').prepend('<div id = "icons"> <a class = "favorite" data-value = "'+data.msg.id+'" > <img id = "no_p_fav" src="{{url("/icons/non_star.png")}}" ></img></a></div>'); 

機能以下は、動的要素を作成する方法です。

$(document).ready(function(){ 

    $('.favorite').on('click',function(){ 
     var candidate_id = $(this).data('value'); 
     alert(candidate_id); 
    }); 
}); 

は、私はまた、どのように私はそれが動的および静的の両方の要素のための要素のために動作するのですか？この

$('#icons').on('click','a.favorite',function(){//myFunction}); 
$('a').on('click','.favorite',function(){//myFunction}); 

を試してみましたか

Answer 1

に必要動的に作成されたイベントの委任を使用することはできません。最初からbodyの上位レベルの要素が必要です。

$('body').on('click','.favorite',function(){//myFunction}); 

aもイベントが、この場合に委譲されていないので、それは

$('a').on('click','.favorite',function(){//myFunction}); // won't work 

Answer 2

このコードを試してみてください：動的に作成された要素については

$(document).ready(function(){ 

    $(document).on('click','.favorite',function(){ 
     var candidate_id = $(this).data('value'); 
     alert(candidate_id); 
    }); 
}); 

Answer 3

#iconでもあるので、あなたがイベントを委任する $（ドキュメント）.ready（関数（）{

$('body').on('click','.favorite',function(){ 
     var candidate_id = $(this).data('value'); 
     alert(candidate_id); 
    }); 
}); 

Answer 4

変更あなたの関数、この方法のように要素自体にアクセスして、動作しません

$(function(){ 
    $(document).on('click','.favorite',function(){ 
     var candidate_id = $(this).data('value'); 
     alert(candidate_id); 
});