How to pass the arguments onclick event jquery

Question

i am getting json file data on ready event

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

Here when i click on comments. It shows Unexpected identifier . How to pass particular data by onclick event

Everything working fine. I can't use onclick with arguments. But It called without argument — Mohaideen Ismail
– Mohaideen Ismail, Commented Oct 29, 2014 at 9:08

Arun P Johny · Accepted Answer · 2014-10-29 09:21:14Z

1

A more appropriate solution will be is to use event delegation and data api like

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

edited Oct 29, 2014 at 9:21

answered Oct 29, 2014 at 9:07

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arun P Johny Over a year ago

@MohaideenIsmail sorry... fixed a but in reading the data... it should have been var data = $(this).closest('.meta').data('walldata');

Bhushan Kawadkar · Accepted Answer · 2014-10-29 09:05:41Z

1

Try this : put quotes around data using escape character.

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

answered Oct 29, 2014 at 9:05

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

4 Comments

Mohaideen Ismail Over a year ago

It passing [object Object] . Not a values

Bhushan Kawadkar Over a year ago

to pass value you need to use data[i].property

Pratik Joshi Over a year ago

@BhushanKawadkar , dont u think event delegation is better solution?

Bhushan Kawadkar Over a year ago

@jQueryAngryBird, yes it is better solution as suggested by Arun.

jogesh_pi · Accepted Answer · 2014-10-29 09:07:46Z

0

Slightly Changes by me, I have passed the data in data- attribute and define a event with .on() on .comments class :

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

answered Oct 29, 2014 at 9:07

jogesh_pi

9,7745 gold badges40 silver badges65 bronze badges

Collectives™ on Stack Overflow

How to pass the arguments onclick event jquery

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related