在动态创建的元素上触发三次单击事件

Three time firing of click event on dynamically created element

本文关键字：三次 事件 单击 创建 动态 元素      更新时间：2023-09-26

我面临着非常简单的问题。我正在尝试在动态生成的元素上添加点击事件，如下所示

$(document).ready(function(){
    $('ul').on('click', 'li.clickable', function() {
        console.log( $(this).text() );
    });
});

<ul id="codingView">
    <li id="" style="display:none;" class="clickable"><span></span></li>
</ul>

在这里，我动态地创建了两个li元素。

问题是控制台每次单击li都会写入 3 次。为什么？任何解决方法。

编辑

 var $box=$('#codingView li:eq(0)');
$('#codingView').empty();
$.each(data,function(key,value){
    console.log(this.topic);
    $box.find("span").html(this.topic);
    $box.css("display","block");
    $box.clone().appendTo("#codingView");       
});

听起来您可能将<li>嵌套在彼此内部。我会确保生成的HTML是你认为的那样。

我不确定为什么你的代码不起作用，但这似乎工作得很好

<ul id="codingView"></ul>

$(function() {
    var cv = $('#codingView');
    cv.on('click', 'li.clickable', function() {
        console.log($(this).text());   
    });
    for(var i = 0; i < 5; ++i) cv.append($('<li/>', {'class' : 'clickable'}).html('<b>I AM #' + i + '</b>'));
});

//编辑：用您的新代码更新了小提琴，对其进行了一点更改：

$(function() {
    var cv = $('#codingView');
    $('#codingView').empty();
    var data = [{topic: 1}, {topic: 2}, {topic: 3}];
    $.each(data,function(){
        console.log(this.topic);
        var li = $('<li/>', { 'class': 'clickable'}).append($('<span/>').html(this.topic));
        li.appendTo(cv);
    });
    cv.on('click', 'li.clickable', function() {
        console.log($(this).text());   
    });
});
相关文章：