jquery正确的方法来动态填充元素并执行特定于每个元素的回调吗?

时间:2012-07-28 21:16:52

标签: jquery

我正试图找出在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>&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>

3 个答案:

答案 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>&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
});
祝你好运!