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元素时，来自与我们的.foo选择器匹配的项目，我们的doSomething函数将被触发。

于 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 回答