Question

我正在开发一个在页面上动态添加图表的Web应用程序，左侧有一个侧边栏，提供了用于浏览图表的锚点。

侧边栏锚点和图表通过JQuery附加。我相信这里的部分问题是事件监听器没有触发附加的元素。

网络应用程序代码非常大，所以我只是附上所涉及的代码段。我的目标是点击锚点“SMOOTH”滚动，而不是从一个图表跳到另一个图表。

我查看下面这篇文章以获取滚动代码：

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});

Smooth scrolling when clicking an anchor link

然后将其与此帖结合起来，将事件监听器添加到附加的div：

Event binding on dynamically created elements?

$(document).on( eventName, selector, function(){} );

我最终得到了这个功能，但它仍然无效：

$(document).on('click', '#scrollAnchor', function () {
    "use strict";
    alert("Click event works but I still won't scroll!");
    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
    return false;
});

最后，这是附加元素的代码。

function updateChartData() {

           ...

    navDiv = '<a id="scrollAnchor" href="#' + chartName
             + '"> <div class="chartAnchor"><span>'
             + chartName
             + '</span></div></a>';
}

function addChartPage() {

           ...

    $('#allNavs').append(navDiv);
}

（其中allNavs是锚点的容器）

Answer 1

我认为这里有一些问题。首先，您不应多次使用相同的id。您好像在追加多个带有scrollAnchor id的元素。

所以，在这种情况下，我会改变你的updateChartData()函数来使用类而不是像这样的id ......

function updateChartData() {

    ...

    navDiv = '<a class="scrollAnchor" href="#' + chartName
             + '"> <div class="chartAnchor"><span>'
             + chartName
             + '</span></div></a>';
}

其次，我认为您在点击事件中使用this关键字时会遇到一些困惑。在您引用this时，您指的是$('html, body')选择器。这是如何解决这个问题。请注意，我现在使用的是类选择器而不是id。

$(document).on('click', '.scrollAnchor', function () {
    var scrollHere = $(this).offset().top;
    $('html, body').animate({
        scrollTop: scrollHere
    }, 500);
    return false;
});

Answer 2

我在JsFiddle中创建了这个例子：

https://jsfiddle.net/rcheruti/q11t3ywq/1/

您的所有图表都需要不同的ID 在“菜单”上，“a”标签需要一个属性来存储这些图表ID（此时您正在使用“href”，这很好）。
您不需要使用“a”标记来执行此操作，所有在Javascript代码中都需要使滚动工作。

以下是示例代码：

HTML：

<div class="menu">
  <button id="addItem">Add item</button>
</div>
<div class="box">

</div>

JS：

$(function(){
    var menu = $('.menu');
    var box = $('.box');
    var body = $('body');
    var placeholder = /@/g;
    var nextId = 1;
    var elString = '<div class="item" id="element_@">Element @</div>';
    var buttonString = '<a href="#element_@">Go to @</a>';
    menu.on('click','#addItem',function(ev){
      menu.append( buttonString.replace(placeholder, nextId) );
      box.append( elString.replace(placeholder, nextId) );
      nextId++;
    });
    menu.on('click','a',function(ev){
      ev.preventDefault();
      var button = $(this);
      var id = button.attr('href');
      var el = $(id);
      //body[0].scrollTop = el[0].offsetTop;
      body.animate({
        scrollTop: el[0].offsetTop
      }, 1000);
    });
  });

这只是一个例子，但它确实起到了作用。

JQuery / JavaScript - 滚动以附加div

2 个答案: