Pass JSON object to onclick function

Question

I am trying to pass JSON object to onclick function but it does not work.

$.each(matches, function() {                        
    var item_data = { 
        "category" : this['category_name'],
        "stock" : this['stock_name'],
        "supplier_stock" : this['supplier_stock_name']
    };

    available_stock_items = available_stock_items + '<tr> \
        <td>' + this['category_name'] + '</td> \
        <td>' + this['stock_name'] + '</td> \
        <td>' + this['supplier_stock_name'] + '</td> \
        <td align="center"><img src="' + $j('#edit-vardru-base-path').val() + 'sites/all/modules/core/images/add.png" onClick="select_item('+ item_data +');" /></td> \
        </tr>';
});

function select_item(data)
{
    console.log("***********PRINT***************");
    console.log(data);
}

I get this error "Uncaught SyntaxError: Unexpected identifier" in console window.

EDIT: Now I am trying to pass data (item_data) using event delegation. I have added following code inside $.each(). Callback function is called at click event but I am not able to access item_data.

$j(document).delegate("#row-"+count, "click", function(item_data){
                        alert("TEST");
                        console.log("TEST");                            
                        console.log(item_data);     
                    });

Can you post complete example, how are you invoking it. If possible add jsfiddle — Raunak Kathuria
– Raunak Kathuria, Commented Dec 23, 2013 at 3:21
Yeah we need to know if that's where you're calling console.log(data) or if it happens before. — Matthew Paxman
– Matthew Paxman, Commented Dec 23, 2013 at 3:22
don't use inline event handlers to pass data to a click handler... ue jQuery event handlers.... — Arun P Johny
– Arun P Johny, Commented Dec 23, 2013 at 3:23
It's working fine, Check jsfiddle.net/raunakkathuria/vjY3y make sure that function is getting called, as said by @ArunPJohny use event delegation — Raunak Kathuria
– Raunak Kathuria, Commented Dec 23, 2013 at 3:25

user3123649 · Accepted Answer · 2013-12-23 03:50:55Z

5

You could use html5 data attributes

<div id="dataDiv" data-num="">click div</div>

<script>
var jsonData = { "name": "name1" };

$(document).ready(function () {        
    $("#dataDiv").data("num",jsonData);
    $("#dataDiv").on("click", function () {
        console.log($(this).data("num"));
    });
});
</script>

answered Dec 23, 2013 at 3:50

user3123649

1486 bronze badges

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

Comments

HDT · Accepted Answer · 2013-12-23 04:29:35Z

You can not paste json in DOM try my demo html

<div id='show_test'>
</div>

jquery

$(document).ready(function(){
var matches = [
    {"category_name":"category_1","stock_name":"stock_1","supplier_stock":"supplier_stock_1"},{"category_name":"category_2","stock_name":"stock_2","supplier_stock":"supplier_stock_2"},
{"category_name":"category_3","stock_name":"stock_3","supplier_stock":"supplier_stock_3"}, {"category_name":"category_4","stock_name":"stock_4","supplier_stock":"supplier_stock_4"}
    ];
    $.each(matches, function(i) {
    var arrayDt = [];
    arrayDt[i] = { 
        "category" : this.category_name,
        "stock" : this.stock_name,
        "supplier_stock" : this.supplier_stock
    };
    $("#show_test").append("<div><a id='bt_"+i+"'>click</a></div>");
    $("#bt_"+i).click(function(){
       show_data(arrayDt[i]);
    });
});
});
    function show_data(data){
        alert(JSON.stringify(data));
    }

or see at

http://jsfiddle.net/F6FxB/2/

Collectives™ on Stack Overflow

Pass JSON object to onclick function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related