我试图在表格中显示数据库,允许用户在点击时编辑每条记录。我有一个构造函数创建一个数据库对象。我在我的数据库中循环显示它。这是代码的一部分:
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不起作用。我该如何纠正?感谢。
答案 0 :(得分:3)
没有必要在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>
答案 1 :(得分:2)
this
引用了单击的元素。当你使用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..."
那样编写HTML onclick,但是当您已经使用jquery时,最好以编程方式分配点击处理程序因为这种方式不那么脆弱(你不需要编码引号,考虑data []引用的情况,使用全局变量......)。
请注意,而不是分配&#34; id
&#34;我分配了data-id
。这是因为 ID必须是唯一的,因此要符合100%标准且支持data []数组中的重复值,只需选择其他属性名称而不是id。该约定建议将数据前缀用于用户定义的属性。
答案 2 :(得分:0)
好像你错过了单引号。更新了我的答案以解决此问题
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"));
});
}