2

私は次の問題の解決策を探しています：

1）いくつかのテキスト行を読み込んでいます。そのうちのいくつかには、次のような脚注へのリンクが含まれています。1）これらの行は<a>要素に埋め込まれています（以下を参照）

2）ユーザーがそのような行をクリックすると、対応する脚注のテキストが数秒間表示されます。

3）静的なコンテキストでは、この動作を実行するのに問題はありません。ただし、私の問題は、1）で読み込まれる行が呼び出しごとに異なるため、接続されている脚注のテキストも異なることです。したがって、（さまざまな数の）javascriptイベントハンドラー関数を対応する脚注テキストに動的に接続する方法を見つけようとしています。

これまでのところ、私は次のコードを思い付くことができました-しかし、それは期待どおりに機能しません：

function displayData(data) {
  $('#statisticTable').html(data);  // coming from a datapage.php
  for (i = 0; i < 15; i++) {        // max. 15 footnotes per page
    // The lines containing a hint are looking as follows: 
    // <a href="" id="nt1" class="ui-link">Any Title <sup>1)</sup></a>
    $('#nt' + i).click(function() {
      if (!notesAlreadyLoaded) {
        $.get('notes.php', 'some params', processNotes);
        // a footnote looks like this:
        // <div class="reg_footnote" id="note1">Comment on Any Title: ... </div>
        notesAlreadyLoaded = true;
      }
      else
        // Where can I get the number 'note_index' from?
        // Trying to read the 'id' attribute from the <a> element doesn't work?
        $("#note"+note_index).fadeIn(800).delay(3000).fadeOut(800);
    });
  }
  $.mobile.changePage('#data');
}

function processNotes(notes) {
  $('#footnotes').html(notes);
  // where can I get the number 'note_index' from?
  $("#note"+note_index).fadeIn(800).delay(3000).fadeOut(800);
}

どうやら、イベントハンドラー関数は正しく作成されており、それらも適切なタイミングで呼び出されます。ただし、どの脚注をフェードインするかを指示する方法が見つかりません。

4

2 に答える 2

2

イベント委任を使用します。イベントを要素自体にバインドするのではなく、削除または置換されることのない祖先要素にバインドします。

<ul id="mylist">
    <li><a href="#" class="foo">Foolink</a></li>
</ul>

上記のコードでは、アンカーに直接バインドできます。

$(".foo").on("click", doSomething);

ただし、ご指摘のとおり、これは、後日DOMにドロップされる可能性のある新しいリンクでは機能しません。そのため、ジョブを親要素に委任する必要があります。

$("#mylist").on("click", ".foo", doSomething);

これで、イベントは祖先要素にバインドされ、その中で発生するはずのアンカークリックに応答できるようになります。

セレクターに#mylist一致するアイテムからのクリックイベントが要素にバブルアップすると、関数がトリガーされます。.foodoSomething

于 2012-11-26T15:11:48.137 に答える
0

使用したいのは.live関数です。

http://api.jquery.com/live/

各オブジェクトにこの関数を設定する必要はありません。displaydata関数の外では、次のようなものが必要になります。

$(document).ready(function () {
    $(".reg_footnote").live('click', function() {
        //click event code
    });
});
于 2012-11-26T15:27:59.263 に答える