Question

我有一个显示数据条形图的网站。我正在尝试为图表实现分页，以便用户可以单击“下一个”或“上一个”来滚动浏览总数据的不同子集。

以下是相关的HTML部分：

<div class="graph_fields_wrap1 row backdrop col-lg-12">
    <div class="col-lg-6">
        <h3 class="titles">Top Ten Author Citations</h3>
        <h4 class="titles">All time (from 1970)</h4>
        <button class="pager" id="previous1" type="button"><span class="glyphicon glyphicon-chevron-left"></span> previous</button>
        <button class="pager" id="next1" type="button">next <span class="glyphicon glyphicon-chevron-right"></span></button>
        <div class="chart1 well bs-component"></div>
    </div>
    <div class="col-lg-6">
        <h3 class="titles">Top Ten Author Citations</h3>
        <h4 class="titles userTitle"></h4>
        <button class="pager" id="previous2" type="button"><span class="glyphicon glyphicon-chevron-left"></span> previous</button>
        <button class="pager" id="next2" type="button">next <span class="glyphicon glyphicon-chevron-right"></span></button>
        <div class="chart2 well bs-component"></div>
    </div>
</div> <!-- row -->

这是JavaScript：

$(document).ready(function() {
    // change graph according to author selection
    var wrapperG = $(".graph_fields_wrap1"); // wrapper for div containing citations graphs
    var next1 = $("#next1"); // pagination for all time cited graph
    var previous1 = $("#previous1");
    var next2 = $("#next2"); // pagination for user defined cited graph
    var previous2 = $("#previous2");
    // variables to log subset location in arrays (to use in slice)
    var from1 = 1;
    var to1 = 11;

    // PAGINATION //
    // all time cited, next author set
    $(wrapperG).on("click", next1, function (e) {
        // ignore default action for this event
        e.preventDefault();
        // shift pointers up 10 for next subset of array
        from1 += 10;
        console.log(from1);
        to1 += 10;
        console.log(to1);
        // remove currently displayed graph, 1st child of div (1st graph is 0th)
        $($(wrapperG).children()[0]).remove();
        // load new graph before other graph (1st child of div)
        $(wrapperG).prepend("<div class='col-lg-6'><h3 class='titles'>Top Ten Author Citations</h3><h4 class='titles'>All time (from 1970)</h4><button class='pager' id='previous1' type='button'><span class='glyphicon glyphicon-chevron-left'></span> previous</button><button class='pager' id='next1' type='button'>next <span class='glyphicon glyphicon-chevron-right'></span></button><div class='chart1 well bs-component'></div></div>").loadGraph((topCited.slice(from1,to1)), "chart1", palette1);
    });

    // all time cited, previous author set
    $(wrapperG).on("click", previous1, function (e) {
        // ignore default action for this event
        e.preventDefault();
        // shift pointers down 10 for previous subset of array
        from1 -= 10;
        console.log(from1);
        to1 -= 10;
        console.log(to1);
        // remove currently displayed graph, 1st child of div (1st graph is 0th)
        $($(wrapperG).children()[0]).remove();
        // load new graph before other graph (1st child of div)
        $(wrapperG).prepend("<div class='col-lg-6'><h3 class='titles'>Top Ten Author Citations</h3><h4 class='titles'>All time (from 1970)</h4><button class='pager' id='previous1' type='button'><span class='glyphicon glyphicon-chevron-left'></span> previous</button><button class='pager' id='next1' type='button'>next <span class='glyphicon glyphicon-chevron-right'></span></button><div class='chart1 well bs-component'></div></div>").loadGraph((topCited.slice(from1,to1)), "chart1", palette1);
    });
});

我最初使用$(next1).on("click", function但按钮只触发一次然后停止工作。在Stack Overflow上查找类似的查询我看到了，因为删除了HTML，绑定的处理程序也是如此。然后我将处理程序绑定到未删除的部分（wrapperG）。

我放了console.log行来帮助我查看单击按钮时发生的情况。当我加载页面并单击“下一步”时，控制台会记录数据11,21,1,11，并在重复单击“下一个”或“上一个”按钮时不断重复该数据。显然在点击“下一步”时我希望数据记录11,21然后21,31然后31,41等等。类似地，对于“前一个”按钮，每次减少10个。然后，条形图根据数组中slice的位置显示10条数据。

如果我注释掉“上一个”按钮jQuery部分，那么“下一个”按钮工作正常，条形图正确显示数据。这让我觉得问题在于两个按钮都包含在同一个div中。当我在函数中删除child()[0] .graph_fields_wrap1时，这是我可以引用的唯一div。

**其他**

列出上面的console.log数据，我意识到我已经错误地复制了它。它实际上是返回11,21,1,11。

这会将问题本地化为单击“下一步”按钮，它会触发两个事件处理程序，因此第一个将值增加10，但第二个将它们减少10，否定效果。

因此，我需要找出为什么点击“下一步”按钮会触发这两个事件以及如何阻止这种情况发生。

Answer 1

为什么不做两个onClick - 一个用于下一个，一个用于之前的

var nextButton = $("#next1"); // pagination for all time cited graph
var previousButton = $("#previous1"); // pagination for all time cited graph

$(nextButton).on('click', function(){
    // load next graph & increment numbers
 });

$(previousButton).on('click', function(){
    // load previous graph & decrement numbers
 });

Answer 2

由于点击触发器被触发，事件处理程序可能会被处理掉。您可以做的是将事件处理程序链接到文档并使用它。

$(document).on('click', '.graph_fields_wrap1', function()
{
    ...
});

这应该可以阻止你的事件处理程序消失

Answer 3

我有它的工作。我没有将变量next1（引用id，＃next1）传递给on()的参数，而是尝试将直接引用作为"#next1"传递给选择器。

似乎on()事件处理程序要求您直接引用选择器，尽管我不知道为什么会出现这种情况。

所以，为了纠正我以前的代码，行：

$(wrapperG).on("click", next1, function (e)

应该是：

$(wrapperG).on("click", "#next1", function (e)

jQuery点击同一div中的两个按钮

3 个答案: