如何使用html中的“ this”關鍵字在對象上調用方法？

Question

我正在嘗試在一個表中顯示一個數據庫，該數據庫允許用戶在單擊時編輯每個記錄。 我有一個創建數據庫對象的構造函數。 我正在遍歷數據庫以顯示它。 這是代碼的一部分：

    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);

調用this.edit_record無效。 我該如何糾正？ 謝謝。

Answer 1

無需在HTML本身中編寫onclick 。

您可以這樣處理：

查看有關代碼的注釋。

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 onclick引用了clicked元素。 當您使用jquery時，最好的事情是這樣的：

  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")); 
  });

您可以通過向對象分配全局onclick="mysavedthis.edit_record..." ，然后像onclick="mysavedthis.edit_record..."這樣編寫HTML onclick的方式來實現，但是由於您已經在使用jquery，因此最好以編程方式分配click處理程序，因為這樣可以不太脆弱（您無需編碼引號，考慮data []有引號的情況，使用全局vars ...）。

請注意，我分配了data-id而不是分配“ id ”。 這是因為ID必須是唯一的 ，因此要100％符合標准並在data []數組中支持重復值，只需選擇另一個屬性名稱而不是id。 約定建議對用戶定義的屬性使用數據前綴。

Answer 3

似乎您缺少單引號。 更新了我的答案以解決此問題

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"));
    });

}

以下是小提琴鏈接http://jsfiddle.net/zeskysee/pxgpzspn/