0

我试图找出在 jquery 中执行此操作的最佳方法。我正在通过 ajax 调用获取一些数据，并将其填充到页面中。我们正在处理一个简单的笔记应用程序。每个笔记都有自己的一组数据。我已经包含了我目前正在使用的代码。填充到 DOM 中的注释有多种方法（如链接），它们可以做不同的事情，例如保存、删除、恢复。当这些被点击时，我想进行另一个 ajax 调用并进行 POST。但是，我如何确定保存或删除来自哪个便笺？

我应该如何处理点击事件？我应该为每个动态元素的 id 创建一个选择器吗？这听起来不太理想，我也不知道该怎么做。我可以有一个事件处理程序来创建一个匿名函数并解析 id，其中 id 包含一个唯一标识符和一个指令，例如保存、删除等。这两个似乎都不是最好的选择。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>&nbsp;&nbsp;&nbsp;&nbsp;<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>
4

3 回答 3

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>
于 2012-07-28T21:26:12.213 回答
0

首先，您必须在 ajax 调用响应时将事件绑定到您的元素 - 在ajax success函数中。

在事件处理程序中，您可以获得触发事件的元素：

//what to do
var element = $(this);
var noteId  = element.attr('id');
// then manipulate with it - parse or some else

您还可以note_id在动态创建注释时将信息存储在 attr 中：

            .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
于 2012-07-28T22:06:37.493 回答
-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>&nbsp;&nbsp;&nbsp;&nbsp;<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
});

祝你好运！

于 2012-07-28T21:27:39.610 回答