How do you invoke a method on an object using the “this” keyword in html?

Question

I'm trying to display a database in a table that allows users to edit each record on click. I have a constructor creating a database object. I'm looping through my database to display it. here is a part of the code:

    for (var j = 1; j <this.data.length; j++) {

        var html = '<div id="this.data[j] + '"';

        html += 'onclick="this.edit_record (\''+this.data[j]+'\')">'+this.data[j]+'</div>'; 

    }
    $("#table").append(html);

invoking this.edit_record does not work. How can I correct it? Thanks.

Answer 1

It's unnecessary to write onclick in html itself.

You could handle it in this way:

See comments on code.

for (var j = 1; j <this.data.length; j++) {
    // create html
    var html = '<div id="' + this.data[j] + '"';
    html += this.data[j] + '</div>'; 
    // create new jQuery element
    var e = $(html);
    // set click handler.
    var self = this; // closure for this
    (function(x) { // iterator closure for j
      e.click(function() {
        self.edit_record(self.data[x])
      });
    })(j);
    // append element.
    $("#table").append(e);
}

 function Demo() { this.data = ["foo", "bar", "baz"]; this.edit_record = function(data) { alert(data); } for (var j = 0; j < this.data.length; j++) { // create html var html = '<div id="' + this.data[j] + '">'; html += this.data[j] + '</div>'; // create new jQuery element var e = $(html); // set click handler. var self = this; // closure for this (function(x) { // iterator closure for j e.click(function() { self.edit_record(self.data[x]) }); })(j); // append element. $("#table").append(e); } return this; } var demo = new Demo(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="table"> </div> 

Answer 2

this inside an onclick references the clicked element. As you're using jquery, the best thing would be like this:

  var html="", mythis=this; // save "this" (your object) context 
  for (var j = 1; j <this.data.length; j++) {
        html += '<div data-id="'+this.data[j] + '">'+this.data[j]+'</div>'; 
  }
  $("#table").append(html); // append all html at once, faster!
  // assign a click handler to all divs children of #table
  $("#table>div").click(function() {
     // inside this function, this is the clicked element (so this.getAttribute("data-id") would be the id
     // and mythis would be the saved this (your object)
     mythis.edit_record(this.getAttribute("data-id")); 
  });

You could do it your way assigning a global var to your object then writing the HTML onclick like onclick="mysavedthis.edit_record..." , but as you're already using jquery it's better to programmatically assign the click handler because this way it's less fragile (you don't need to encode quotes, consider the case where data[] has quotes, use global vars ...).

Mind that instead of assigning an " id " I assigned data-id . That's because ID's have to be unique , so to be 100% standards compliant and support duplicate values in your data[] array just choose another attribute name instead of id. The convention suggests to use the data- prefix for user-defined attributes.

Answer 3

It seems like you are missing a single quote. Updated my answer to solve this problem

var parent = this;

for (var j = 0; j < this.data.length; j++) {
    var currentValue = this.data[j];

    var html = '<div id="' + currentValue + '"';
    html += '>' + currentValue + '</div>'; 
    $('#table').append(html);

    $('#'+currentValue).click(function(){
       parent.edit_record ($(this).attr("id"));
    });

}

The following is the fiddle link http://jsfiddle.net/zeskysee/pxgpzspn/