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

我面临的问题很简单。我试图在动态生成的元素上添加click事件，如下所示

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

在这里，我动态创建了两个

li

元素

问题是console在每次单击

li

时都会写入3次。为什么？任何解决办法

编辑

---

听起来您可能将

嵌套在彼此的内部。我会确保生成的HTML是您认为的那样。

我不确定您的代码为什么不工作，但这似乎工作正常

---

$（函数（）{
var cv=$（“#编码视图”）；
cv.on（'click'，'li.clickable'，函数（）{
console.log（$（this.text（））；
});
对于（var i=0；i<5；++i）cv.append（$（'
'，{class'：'clickable'}）.html（'i AM#'+i++'）；
});

//编辑： 使用新代码更新了，并对其进行了一些修改：

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

$（函数（）{
var cv=$（“#编码视图”）；
$（'#codingView'）.empty（）；
var data=[{topic:1}，{topic:2}，{topic:3}]；
$.each（数据，函数（）{
console.log（this.topic）；
var li=$（'
'，{'class'：'clickable'}）.append（$（''.html（this.topic））；
li.附录（cv）；
});
cv.on（'click'，'li.clickable'，函数（）{
console.log（$（this.text（））；
});
});

你能制作一把工作小提琴吗（如果可能的话，不隐藏li）？首先猜测你有嵌套的

ul

元素。不过，我们需要查看您的HTML才能确定。是否有可能每次添加项目时都会添加单击功能？能否发布完整的标记和/或生成2动态创建的

@Anton的代码是正确的。我认为，当你动态创建li时，你将一个监听器附加到所有

li

上，并且最终将更多相同的监听器附加到相同的元素上。我已经检查了它的非冒泡效果。然后你需要显示你的代码。你所拥有的应该可以正常工作。是的，它可以正常工作…我不明白为什么它不能在我的代码中工作…：(

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