我正在尝试写一段代码,可以处理删除或编辑动态HTML表。我用谷歌搜索了这个问题,我看到了很多样本,但没有一个能正常工作。
下面是我的代码:
server.js
router.get('/bookShow', (req, res) => {
bookModel.find({isDeleted : false}).sort('-pageCount').exec((err, data) => {
if (data) {
res.send(data);
}
});
});
数据库中的BookModel:
bookShow.html
<script>
$(document).ready(() => {
$.getJSON('/bookShow', (json) => {
var tr;
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + "<button class='deleteButton'>" + "<i class='material-icons'>delete</i></button>" + "</td>");
tr.append("<td>" + "<button class='editButton'>" + "<i class='material-icons'>edit</i></button>" + "</td>");
tr.append("<td>" + json[i].pageCount + "</td>");
tr.append("<td>" + json[i].name + "</td>")
$('table').append(tr);
}
});
$(document).on('click', '.deleteButton', () => {
console.log($(this));
})
});
</script>
问题:正如它在bookShow.html
中看到的那样,每当.deleteButton
单击时,我都会声明一个事件侦听器。但是我不能访问该表行的其他字段。例如,当我点击Behzad的delete按钮时,我得不到书的名称和页数。
发布于 2018-08-26 08:36:22
通过使用ES6的箭头函数 () => {}
,this
不再是你使用function
时喜欢的东西。它是window
,因为它们是词法作用域绑定的本质。不再是jQuery对DOM元素"this
“的表示。
$(this)
=
使用箭头函数() => {}
进行jQuery.fn.init Window
使用函数function () {}
进行jQuery.fn.init button.deleteButton
因此,您的解决方案将是使用标准的$(document).on('click', '.deleteButton', function() {
或者在按钮创建时添加click
-这可以通过使按钮成为内存中的jQuery元素$('<button>', {on:{click(){}}, appendTo:'selector'})
而不是HTML string文字来实现。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
这是一个翻拍:
const json = [ // You use getJSON, I'll use this for my demo
{"name": "King of the Jungle","pageCount": 543},
{"name": "The Things I've Done","pageCount": 198}
];
jQuery($ => {
// $.getJSON
$('table').append(json.map((book, i) =>
$('<tr>', {
html: `
<td>${i+1}</td>
<td>${book.name}</td>
<td>${book.pageCount}</td>
`,
append: [ // or use prepend
$('<td>', {
append: $('<button>', {
class: "buttonEdit",
html: "<i class='material-icons'>edit</i>",
on: {
click() { // Same as using `click: function () {`
console.log(`Editing ${book.name} by:`, this); // this = <button>
}
}
})
}),
$('<td>', {
append: $('<button>', {
class: "buttonDelete",
html: "<i class='material-icons'>delete</i>",
on: {
click() {
console.log(`Deleting ${book.name} by:`, this);
}
}
})
}),
]
})
));
// END $.getJSON
});
table {
width: 100%;
}
td {
border: 1px solid #ddd;
}
<table></table>
<script src="//code.jquery.com/jquery-3.1.0.js"></script>
https://stackoverflow.com/questions/52022267
复制相似问题