CODEWITHSUNDEEP
javascriptjquery
Snappy
Snappy

Reputation: 203

jQuery pass object in inline onclick

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

Upvotes: 0

Views: 1718

Answers (2)

Andrew L
Andrew L

Reputation: 5486

A few problems I saw with your code,

  1. your loop should be i < robj.length and has a syntax error , should be ;
  2. h was not defined but now not used anymore
  3. 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>

Upvotes: 3

Rohit Kumar
Rohit Kumar

Reputation: 1792

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>

Upvotes: 1

Related Questions