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

对于动态创建的元素，您需要委派事件 $（文件）。就绪（函数（）{

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

点击动态创建的元素jQuery上没有按预期工作

4 个答案: