我正试图找出在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>
答案 0 :(得分:0)
您可以简单地为每个元素提供相同的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>
答案 1 :(得分:0)
首先,您必须在ajax调用响应时将事件绑定到您的元素 - 在ajax
success
函数中。
在事件处理程序中,您可以获取事件触发的元素:
//what to do
var element = $(this);
var noteId = element.attr('id');
// then manipulate with it - parse or some else
此外,您可以在动态创建注释时在attr中存储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
答案 2 :(得分:-1)
当您将备注元素添加到页面时,您可以将您想要用于笔记的任何数据放在备注本身的数据属性中:
$.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
});
祝你好运!