0

私は非常に単純な問題に直面しています。このような動的に生成された要素にクリックイベントを追加しようとしています

$(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>

ここでは、2 つのli要素を動的に作成しました。

問題は、 をクリックするたびにコンソールが 3 回書き込みを行っていることliです。なんで？任意の回避策。

編集

 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");       
});
4

2 に答える 2

1

<li>s を互いに入れ子にしているようです。生成された HTML があなたが思っているとおりであることを確認します。

于 2013-09-12T14:51:18.383 に答える
0

コードが機能しない理由はわかりませんが、これはうまく機能しているようです

<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());   
    });
});
于 2013-09-12T15:01:16.870 に答える