jQuery pass object in inline onclick

Question

How can I pass object to inline onclick event. When I try following code I either get undefined or [object object].

also how can I bind click event to h to avoid inline code.

this.get = function(o) { console.log(o, o.foo); } this.somefunction = function(robj) { for (var i = 0, i <= robj.length; i++) { var fname = robj[i]['filename'] h += '<div class="checkbox checkbox-success" onclick="get(\'' + robj + '\')">' + '<input id="' + fname + '" type="checkbox" class="styled"> ' + '<label for="' + fname + '"><a data-fancybox-next class="button-next" href="#">' + fname + '</a></label>' + '</div>'; } }

Is there any other solution without declaring it outside document ready ? — Snappy
– Snappy, Commented Oct 31, 2017 at 19:04
yes,,,,,you can assign a global scope..and then assign the get function with the global scope — Rohit Kumar
– Rohit Kumar, Commented Oct 31, 2017 at 19:06

Andrew L · Accepted Answer · 2017-10-31 20:20:21Z

A few problems I saw with your code,

your loop should be i < robj.length and has a syntax error , should be ;
h was not defined but now not used anymore
The array passed into get() cannot be accessed by using o.foo

Side note: take a look at ES6 template literals to help clean up some of the quoting action you are currently doing, for example id="' + fname + '" can look like id="${fname}"

Here is a full working example with the fixes above on how you can add a listener to your div (by creating DOM element) and with the object as a parameter.

this.get = function(o) { console.log(o); console.log(o.foo); } this.somefunction = function(robj) { for (let i = 0; i < robj.length; i++) { var fname = robj[i]['filename'] var myDiv = document.createElement("div"); myDiv.className = "checkbox checkbox-success"; myDiv.onclick = function(){get(robj[i])}; myDiv.innerHTML = '<input id="' + fname + '" type="checkbox" class="styled"> ' + '<label for="' + fname + '"><a data-fancybox-next class="button-next" href="#">' + fname + '</a></label>'; document.getElementById("container").appendChild(myDiv); } } var robj = [{filename: "myFilename", foo: "myFoo"}] somefunction(robj);

<div id="container"></div>

your onclick method doesn't help much here. it'll always pass myFoo. what about filename?
it passes the whole object to the get() method, which includes filename and foo properties.

Rohit Kumar · Accepted Answer · 2017-10-31 19:03:26Z

here is an example of dynamically written onclick . simply keep the function outside of doucment.ready

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> function changePath(distinct_inputs) { console.log(distinct_inputs); } $(document).ready(function(){ var distinct_inputs = 0; $('.icon1').click( function(){ distinct_inputs = distinct_inputs + 1 ; $('#insert-file').append('<ul class="ul list-inline"><li style="width:90%"><input onchange="changePath('+distinct_inputs+')" type="file" class="base'+distinct_inputs+' form-control form-input form-style-base"><input type="text" class="fake'+distinct_inputs+' form-control form-input form-style-fake" readonly placeholder="choose your file"><span class="glyphicon glyphicon-open input-place"></span></li><li class="icon fa fa-minus"></li></ul>'); }); }); </script> </head> <body> <div id="insert-file" ></div> <button type="button" class="icon1">CLick here</button> </body> </html>

Collectives™ on Stack Overflow

jQuery pass object in inline onclick

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related