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

3

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>

edited Oct 31, 2017 at 20:20

answered Oct 31, 2017 at 19:59

Andrew L

5,5161 gold badge29 silver badges40 bronze badges

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

2 Comments

sonubreeze Over a year ago

your onclick method doesn't help much here. it'll always pass myFoo. what about filename?

Andrew L Over a year ago

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related