Question

这是我的导航栏内容

<div class="col-md-3">
 <div class="bs-docs-sidebar hidden-print affix" role="complementary">
      <ul class="nav bs-docs-sidenav" id="titles">

      </ul>
    </div>
  </div>

<script type="text/javascript">
$(function(){
    var html = '';
    $("td > h1 > a").each(function(){
        html = html + '<li><a href="#" data-scroll="' + $(this).attr('data-anchor') + '">' + $(this).text() + '</a></li>';
    });
    document.querySelector('#titles').innerHTML = html;
});

$('#titles > li > a').on('click', function() {
    console.log('called');
    var scrollAnchor = $(this).attr('data-scroll'),
        scrollPoint = $('tbody[data-anchor="' + scrollAnchor + '"]').offset().top - 28;
    $('body,html').animate({
        scrollTop: scrollPoint
    }, 500);
    return false;
});

第一个函数将根据html内容填充数据。第二个函数将处理导航栏内容中的单击事件。

但是，第二个功能永远不会被执行。

有人可以告诉我如何解决这个问题吗？

Answer 1

正在创建HTML。

您应该使用Event Delegation。您必须使用委托事件方法来使用.on()。

一般语法

$(document).on(event, selector, eventHandler);

理想情况下，您应该将document替换为最近的静态容器。在你的情况下是'#titles'。所以使用

$('#titles').on('click', 'li > a', function() {
    console.log('called');
    var scrollAnchor = $(this).attr('data-scroll'),
        scrollPoint = $('tbody[data-anchor="' + scrollAnchor + '"]').offset().top - 28;
    $('body,html').animate({
        scrollTop: scrollPoint
    }, 500);
    return false;
});

导航栏上的onclick事件

1 个答案: