Невозможно прикрепить событие нажатия на кнопки в JQuery

Question

Я новичок в JQuery, и я все испортил ...
Я пытаюсь создать тур для моего сайта. У меня есть эта функция для создания и показа попов. Они появляются, но кнопки работают только в первом поповере (только с одной кнопкой).

Это код, который у меня сейчас есть:

function createButton(i){ //Creates buttons for later appending to popover's content
    if (i==0){ //First popover, just needs "Next" button
        return '<a class="btn btn-light border border-dark float-right mb-2" >Next</a>';
    }

    else if(i<popovers.length-1){ //Popovers in the middle need both "Previous" and "Next" buttons
        var buttons = new Array();
        buttons[0] = '<a class="btn btn-light border border-dark float-left mb-2">Previous</a>';
        buttons[1] = '<a class="btn btn-light border border-dark float-right mb-2">Next</a>';
        return buttons;
    }

    else{ //The last popover only needs a "Finish" button
        return '<a class="btn btn-light border border-dark float-right mb-2">Finish</a>';
    }
}

Проблема должна быть здесь :

function showPopover(i){

        var current = popovers[i];
        var button = $(createButton(i));
        current.popover('toggle');
        var new_position = $('.popover').offset();
        var content = $('.popover-body');

        if(button.length == 2){
            $(button[0]).appendTo(content);
            $(button[1]).appendTo(content);
        }
        else{
            button.appendTo(content);
        }
        window.scrollTo( new_position.left, new_position.top - 60 );

        if(button.length == 2){

            $(button[0]).click(function ()
            {
                current.popover('toggle');
                content.detach();
                i--;
                if(i>=0){
                    showPopover(i);
                }
            });

            $(button[1]).click(function ()
            {
                current.popover('toggle');
                content.detach();
                i++;
                if(i!=popovers.length){
                    showPopover(i);
                }
            });
        }
        else{
            button.click(function ()
            {
                current.popover( 'toggle' );
                content.detach();
                i++;
                if(i!=popovers.length){
                    showPopover(i);
                }
            });
        }


    };

При проверке кнопок я мог видеть, что к ним не прикреплено никакого события, поэтому проблема заключается в функциях щелчка.
Я подумал, что может неправильно использовать селекторы JQuery ; однако функции добавления работают и показывают кнопки на всплывающей панели.

Спасибо за ваши ответы!

Answer 1

Я думаю, что сначала вы добавляете эти кнопки в DOM, а затем только прикрепляете события.

, поскольку я вижу, что вы используете $(button[0]) что-то. jQuery будет искать этот элемент в DOM и прикреплять туда событие click. и, более того, button[0] не является реальным объектом DOM, но в этот момент это просто строка.