javascript - 在动态创建的元素上单击时无法按预期工作 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

由于 #icon 也是动态创建的，因此您无法对其使用事件委托(delegate)，因此您需要一个从一开始就存在的更高级别元素，例如 body:

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

a 也不起作用，因为在这种情况下事件没有被委托(delegate)，它正在访问元素本身

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