Question

我在准备好的事件上获得了json文件数据

    $(document).ready(function(e){
        $.getJSON( "data/wall.json", function( data ) {
            createWall(data);
        });
    })

    function createWall(data)
    {
        for(var i=0; i<data.length;i++){
    var stats = $("<p class='meta'><span>14 Days Ago</span><span class='comments' onclick='commentSection("+data[i]+")'>0 Comments</span><span class='likes'>Like</span></p>");
    $('#wall').append(stats);
}
    }

    function commentSection(data){
    console.log(data);
    }

这时我点击评论。它显示了意外的标识符。如何通过onclick事件传递特定数据

Answer 1

试试这个：使用转义字符在数据周围加上引号。

function createWall(data)
{
        for(var i=0; i<data.length;i++){
    var stats = $("<p class='meta'><span>14 Days Ago</span><span class='comments' onclick='commentSection(\""+data[i]+"\")'>0 Comments</span><span class='likes'>Like</span></p>");
    $('#wall').append(stats);
   }
}

Answer 2

更合适的解决方案是使用事件委托和数据api，如

$(document).ready(function (e) {
    $.getJSON("data/wall.json", function (data) {
        createWall(data);
    });

    $('#wall').on('click', '.comments', function () {
        var data = $(this).closest('.meta').data('walldata');
        commentSection(data);
    });
})

function createWall(data) {
    for (var i = 0; i < data.length; i++) {
        var stats = $("<p class='meta'><span>14 Days Ago</span><span class='comments'>0 Comments</span><span class='likes'>Like</span></p>").data('walldata', data[i]);
        $('#wall').append(stats);
    }
}

function commentSection(data) {
    console.log(data);
}

Answer 3

我稍微改变了一下，我已经传递了data-属性中的数据，并在.comments类上定义了.on()的事件：

var stats = $("<p class='meta'><span>14 Days Ago</span><span class='comments' data-clk='"+data[i]+"' >0 Comments</span><span class='likes'>Like</span></p>");

$('body').on('click', '.comments', function(e){
   e.preventDefault(); 

   // Retrive Data
   var data = $(this).data('clk');
})

如何传递参数onclick事件jquery

3 个答案: