javascript - jQuery 单击同一 div 中的两个按钮

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 是删除后，绑定(bind)的处理程序也会被删除。因此，我将处理程序绑定(bind)到未删除的部分 (wrapperG)。

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

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

** 附加 **

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

这将问题定位为当单击“下一步”按钮时，它会触发两个事件处理程序，因此第一个事件处理程序将值增加 10，但第二个事件处理程序将值减少 10，从而抵消了效果。

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

Answer 1

问题是您使用了相同的元素 ID 两次。为了防止双重事件，请将“return false”添加到您的处理程序中，或使用不同的 ID

Sidenode:永远不要使用 ID 两次，而是使用类