单击时无法按预期在动态创建的元素上正常工作

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也是动态创建的，因此您不能对其使用事件委托，因此您需要一个自开始就存在的更高级别的元素，例如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

对于动态创建的元素，您需要委派事件$（document）.ready（function（）{

    $('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);
});