Скрытая кнопка, не работает при первом нажатии после появления

Question

У меня есть две кнопки, Один будет строить данные, второй будет загружать данные. Только если этот график имеет данные, я покажу кнопку загрузки Excel. эта часть работает нормально, но мой первый щелчок по второй кнопке никогда не работает, Спасибо за вашу помощь.

в html:

<button id='btn-plot' class='btn-dark'>Plot</button>
<button id='btn-xls' class='btn-dark' hidden='hidden'>Excel</button>

в js:

$('#btn-plot').on('click', function(lista) {

        var lista = data['lista'].toString()
        if (lista.length != 0) {
                document.getElementById('btn-xls').hidden = false;

        } else {
                document.getElementById('btn-xls').hidden = true;

        }
});

    $('#btn-xls').on('click', function(){
             alert('i am here')
             (...)
                };
        });

Answer 1

Удалить скрытый атрибут из btn-xls

<button id='btn-plot' class='btn-dark'>Plot</button>
<button id='btn-xls' class='btn-dark' >Excel</button>

Обновление Javascript

$('#btn-xls').hide();
$('#btn-plot').on('click', function(lista) {
        var lista = data['lista'].toString()
        if (lista.length != 0) {
                $('#btn-xls').show();

        } else {
                $('#btn-xls').hide();

        }
});

    $('#btn-xls').on('click', function(){
              alert('i am here')
             (...)
                }; 
        });