Question

我正在尝试创建动态chartjs饼图。到目前为止，我只能使用jQuery .click函数成功添加“更新”函数。但是，我也希望能够通过使用jQuery .keypress（）函数来更新图表。因此，我尝试将此函数插入创建饼图的。但是由于某些原因，这似乎没有用。

我尝试更改功能的顺序，但是，似乎没有任何效果。我知道代码是正确的，因为如果我将其复制并粘贴到控制台中，它将可以正常工作。因此，我怀疑这与页面加载后触发该功能有关，我尝试将.keypress（）函数包装到window.ready（）函数中来进行此操作，但是，这也没有达到目的

这是我用来插入饼图的代码：

$(document).ready(function(chartData) {
    var childText = $('.noDisplay tbody').text();
    //Number of positives                          
    var positiveCount = (childText.match(/Positiv/g) || []).length;
    //Number of negatives
    var negativeCount = (childText.match(/Negativ/g) || []).length;
    //Find total number of tests
    var totalTests = positiveCount + negativeCount;
    //Calculate into %
    var positiveProcent = positiveCount / totalTests * 100;
    var negativeProcent = negativeCount / totalTests * 100;
    //With 2 decimals
    var positiveProcent2 = positiveProcent.toFixed(2);
    var negativeProcent2 = negativeProcent.toFixed(2);
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ["Positive tests i %", "Negative tests i %", ],
            datasets: [{
                label: 'Positiv vs negativ',
                data: [positiveProcent2, negativeProcent2],
                backgroundColor: ['rgba(39, 174, 96, 0.5)', 'rgba(231, 76, 60, 0.5)', ],
                borderColor: ['rgba(39, 174, 96, 1)', 'rgba(231, 76, 60, 1)', ],
                borderWidth: 1
            }]
        },
        options: {}
    });

    function updateChart() {
        var childText = $('.col-sm-12 #dataTable_wrapper').text();
        //Number of positives                          
        var positiveCount = (childText.match(/Positiv/g) || []).length;
        //Number of negatives
        var negativeCount = (childText.match(/Negativ/g) || []).length;
        //Find total number of tests
        var totalTests = positiveCount + negativeCount;
        //Calculate into %
        var positiveProcent = positiveCount / totalTests * 100;
        var negativeProcent = negativeCount / totalTests * 100;
        //With 2 decimals
        var positiveProcent2 = positiveProcent.toFixed(2);
        var negativeProcent2 = negativeProcent.toFixed(2);
        myChart.data.datasets[0].data = [positiveProcent2, negativeProcent2];
        myChart.update();
    }
    $('.kkTable #dataTable_filter > label').keypress(function() {
        console.log('1');
        updateChart();
    });
    $('button').click(function() {
        updateChart();
    });
});

如何使keypress（）函数起作用？

预先感谢：-）

Answer 1

此问题已解决，方法是将侦听器从一组非常特定的元素切换到文档，并使用先前的选择器作为on方法的选择器。随附完整的讨论：

据我所知，label元素不会发出按键事件。您确定不是指.kkTable #dataTable_filter > label input吗？ – Douwe de Haan

是的，我做到了。只是尝试将其更改为该值，但仍然不起作用：/ – LENide300_KK

它记录1吗？因为如果没有，那肯定还有其他问题。您还可以将HTML附加到问题上吗？ – Douwe de Haan

不，不是，这也使我感到困惑。我会这样做，但是事情是我从通过PHP生成的表中提取数据，然后使用datatables.net将一些排序+搜索功能应用于该表。因此，如果不能将HTML设置得太长，我就无法发布它。 – LENide300_KK

设置侦听器（按键部分）时，HTML已经存在吗？还是稍后再生成HTML？因为那可以解释为什么它不起作用。尝试将功能更改为以下内容：$(document).on('keypress', '.kkTable #dataTable_filter > label input', function() { – 杜威·德·哈恩

HTML已经存在。但是，您的建议有效。但是我不明白为什么？我以为$(document).on('keypress', '.kkTable #dataTable_filter > label input', function() {'与$('.kkTable #dataTable_filter > label').keypress(function() {相同？您是否知道这是为什么？ – LENide300_KK

区别在于所有事件都会冒泡（传播）DOM树，并最终出现在文档上。我提供的侦听器侦听文档上的按键事件，然后检查事件是否来自与筛选器相关的事件。因此，即使在设置了侦听器后更改了HTML，它仍然可以使用，但您使用的HTML仅可以使用既可以检查过滤器又可以在调用该过滤器时显示的元素。 – Douwe de Haan

使用.keypress（）无法更新Chartjs饼图

1 个答案: