0

jqueryでこれを行う最良の方法を見つけようとしています。私は ajax 呼び出しを介していくつかのデータを取得し、それをページに詰め込んでいます。簡単なメモを取るアプリケーションを扱っています。各メモには独自のデータ セットがあります。現在取り組んでいるコードを含めました。DOM に詰め込まれたメモには、保存、削除、元に戻すなど、さまざまなことを行う複数のメソッド (リンクとして) があります。それらがクリックされたら、別の ajax 呼び出しを行い、POST を実行したいと思います。しかし、どの付箋から保存または削除が行われたかをどのように判断すればよいでしょうか?

クリック イベントを処理するにはどうすればよいですか? すべての動的要素の ID に対してセレクターを作成する必要がありますか? それは理想的とは言えませんし、その方法もわかりません。匿名関数を作成し、ID を解析する 1 つのイベント ハンドラーを使用できますか。ID には一意の識別子と、save、delete などのディレクティブが含まれます。これら 2 つのどちらも最適なオプションとは思えません。スタックオーバーフローは何を推奨していますか?

<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

まず、関数内で 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');

また、すべてに対して 1 つのハンドラーが必要な場合 (お勧めできません)、以下を格納できます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 に答える
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();
});

それらすべてを 1 つのメイン関数でキャプチャし、そこから何をするかを決定したい場合は、クラス属性の存在をテストできます。

$('#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 に答える
-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 に答える