Question

我正在寻找以下问题的解决方案：

1）我正在加载几个文本行，其中一些包含脚注的链接，如下所示：1）。这些线嵌入在＆lt; a＆gt;中。元素（见下文）

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);
}

显然，事件处理函数是正确创建的，并且它们也会在正确的时刻被调用。但是，我找不到告诉他们应该淡入哪个脚注的方法。

Answer 1

使用事件委派。不要将事件绑定到元素本身，而是绑定到永远不会被删除或替换的祖先元素：

<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功能将被触发。

Answer 2

您想要使用的是.live功能。

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

您不需要在每个对象上设置此功能。在displaydata函数之外，您需要以下内容：

$(document).ready(function () {
    $(".reg_footnote").live('click', function() {
        //click event code
    });
});

如何告诉事件处理程序指向动态加载的内容

2 个答案: