我正在努力找出在jquery中实现这一点的最佳方法。我通过ajax调用获取一些数据，并将其填充到页面中。我们正在处理一个简单的笔记应用程序。每个音符都有自己的一组数据。我已经包含了我目前正在处理的代码。填充到DOM中的注释有多个方法（作为链接），用于执行不同的操作，例如保存、删除、还原。当这些被点击时，我想进行另一个ajax调用并执行POST。但是，我如何弄清楚保存或删除来自哪张便签？
我应该如何处理点击事件？我应该为每个动态元素的id制作一个选择器吗？这听起来并不理想，我也不知道该怎么做。我可以有一个事件处理程序来生成一个匿名函数并解析id吗？其中id包含一个唯一的标识符和一个指令，如save、delete等。这两者似乎都不是最好的选择。stackoverflow推荐什么？
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<link rel="stylesheet" type="text/css" href="layout.css" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$.ajax({
url: 'noteGet.php',
data: "",
dataType: 'json',
success: function(rows)
{
for (var i in rows) {
var noteId = rows[i][0];
var noteContent = rows[i][2];
$('#allNotes')
.append('<span id="stickyNote'+noteId+'" class="stickyNote"><textarea id="stickyNoteTextArea'+noteId+'" class="stickyNoteTextArea">'+noteContent+'</textarea><a href="#" id="stickyNoteSave'+noteId+'">save</a> <a href="#" id="stickyNoteDelete'+noteId+'">delete</a></span>')
}
}
});
$('#allNotes').on('click', 'a', function() {
//what to do
});
});
</script>
</head>
<body>
<span id="links"></span>
</body>
</html>
您可以简单地为每个元素提供相同的class属性，并为操作链接（保存、删除等）提供它们自己的类，这样您也可以识别它们。
$.ajax({
url: 'noteGet.php',
data: "",
dataType: 'json',
success: function(rows){
$.each(rows,function(index,elem)){
var noteContent = elem[2];
$('#allNotes').append(HTML); // see below for HTML content.
});
}
});
$('#allNotes .stickyNote .save_action').on('click', function(e) {
// user clicked on a save action
// retrieve the original id from the parents rel parameter.
var noteId = $(this).parent().attr('rel');
e.preventDefault();
});
$('#allNotes .stickyNote .delete_action').on('click', function(e) {
// user clicked on a delete action
// retrieve the original id from the parents rel parameter.
var noteId = $(this).parent().attr('rel');
e.preventDefault();
});
如果你想在一个主要功能中捕获所有这些，然后决定从中执行什么操作在那里，您可以测试类属性的存在
$('#allNotes .stickyNote a').on('click',function(){
// retrieve the original id from the parents rel parameter.
var noteId = $(this).parent().attr('rel');
if ($(this).hasClass('save_action')){
// user clicked on a save action
}
if ($(this).hasClass('delete_action')){
// user clicked on a delete action
}
e.preventDefault();
});
我将在这里为您单独列出实际的HTML，这样更容易查看-
<span rel="'+index+'" id="stickyNote'+index+'" class="stickyNote">
<textarea id="stickyNoteTextArea'+index+'" class="stickyNoteTextArea">'+noteContent+'
</textarea>
<a href="#" class="save_action" id="stickyNoteSave'+index+'">save</a>
<a href="#" class="delete_action" id="stickyNoteDelete'+index+'">delete</a>
</span>
首先，当ajax调用responsed-in ajaxsuccess函数时，必须将事件绑定到元素。
在事件处理程序中，您可以获得触发事件的元素：
//what to do
var element = $(this);
var noteId = element.attr('id');
// then manipulate with it - parse or some else
您还可以在动态创建注释时将note_id信息存储在属性中：
.append('....<a href="#" _noteId="'+noteId+'">delete</a>....')
然后使用这个属性：
// what to do
var noteId = $(this).attr('_noteId');
如果你想有一个处理程序为所有（不是好主意），你可以存储action_type:
.append('....<a href="#" _noteId="'+noteId+'" _actionType="delete">delete</a>....');
也可以使用它：
// what to do
var el = $(this);
var noteId = el.attr('_noteId');
var actionType = el.attr('_actionType');
// then 'switch (actionType) ...' or some else
当您将笔记元素添加到页面时，您可以将想要用于笔记的任何数据放置在笔记本身的数据属性中：
$.ajax({
url: 'noteGet.php',
data: "",
dataType: 'json',
success: function(rows) {
for (var i in rows) {
var noteId = rows[i][0];
var noteContent = rows[i][2];
var noteEl = $('<span id="stickyNote'+noteId+'" class="stickyNote"><textarea id="stickyNoteTextArea'+noteId+'" class="stickyNoteTextArea">'+noteContent+'</textarea><a href="#" id="stickyNoteSave'+noteId+'">save</a> <a href="#" id="stickyNoteDelete'+noteId+'">delete</a></span>');
noteEl.appendTo('#allNotes').find("a").data("id", noteId);
}
}
});
然后你可以在点击处理程序中访问这个：
$('#allNotes').on('click', 'a', function(e) {
var noteId = $(e.target).data("id");
// operate
});
祝你好运！