Использование метода jQuery .on () не работает с динамически создаваемым элементом. - PullRequest
Новая
       30

Использование метода jQuery .on () не работает с динамически создаваемым элементом.

0 голосов
/ 23 июня 2019

В настоящее время я работаю над сайтом, на котором есть кнопка выхода из системы, которая динамически вставляется в боковую панель всякий раз, когда окно достигает определенного размера. Когда я нажимаю кнопку выхода, я хочу вызвать метод logOut();

Идентификатор тега привязки везде "btnLogOut" (даже проверил его, выполнив поиск в моей IDE на наличие каких-либо невидимых символов или чего-то еще).

На каждой странице всегда есть только один тег привязки выхода из системы. Чтобы быть уверенным, я заменил «btnLogOut» на «btnLogOut_zq» везде, и ошибка сохранилась.

Я использовал setInterval(function(){ console.log($("#btnLogOut").length); },1);, и это возвращает 1 постоянно, изменяя размеры окна и делая его больше, а затем меньше и так далее, чтобы элемент всегда присутствовал на странице.

Использование метода .on() для обнаружения клика, а затем вызов logOut(); метода 

$(document).ready(function()
{
    $(document).on("click", "#btnLogOut", function()
    {
        logOut();
    });
});

Это то, что я использую, чтобы взять оригинальный тег привязки и поместить его на боковую панель (только ту часть, которая имеет отношение к кнопке выхода из системы): 

$.fn.navList = function() {

    var $this = $(this);
        $a = $this.find('a'),
        b = [];

    $a.each(function() {

        var $this = $(this),
            indent = Math.max(0, $this.parents('li').length - 1),
            href = $this.attr('href'),
            target = $this.attr('target');
        if($a.attr("id") === "btnLogOut") {
            console.log($a);
            b.push(
                '<a ' +
                    'id="btnLogOut" ' + 
                    'class="link depth-' + indent + '"' +
                    ( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') +
                    ( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') +
                '>' +
                    $this.text() +
                '</a>'
            );
        }

    });

    return b.join('');

};

$(
    '<div id="navPanel">' +
        '<nav>' +
            $('#btns').navList() +
        '</nav>' +
    '</div>'
)

Ответы [ 2 ]

0 голосов
/ 23 июня 2019

Просто положите: 

$(document).on("click", "#btnLogOut", function()
{
   logOut();
});

За пределами $(document).ready

Осторожно, потому что, взглянув на код HTML-страницы, вы получаете в два раза больше идентификатора #btnLogOut.

РЕДАКТ. 1:

Посмотрите на этот JSFiddle , который я создал, чтобы показать вам, что даже к элементам, созданным на лету, прикреплено событие onclick.

0 голосов
/ 23 июня 2019

Создание элементов по строке не создает их экземпляры внутри DOM . Чтобы обойти это, вам придется создавать элементы с помощью API Javascript DOM (или серверной визуализации элементов перед загрузкой DOM, например, HTML-файл).

Хотя есть несколько способов сделать это, это хороший пример с jQuery: 

b.push(
    $('<a />', {id:"btnLogout", class: "link depth-1", target:"_BLANK", "href":"HTTP://", "text":$this.text()})
);

Предполагается, что b - это существующий массив, который будет добавлен к другому элементу или повторен.

Узнайте больше о создании элементов «правильным» способом в документации Mozilla: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

EDIT:

Для вашего вложения ниже: 

$('<div />', {id: 'navPanel'}).append(
    $('<nav />', html: $("#btns").navList())
);

Если у вас есть доступ к ES6, вы можете использовать литералы шаблонов для этого: 

$(
    `<div id="navPanel">
        <nav>
            $($('#btns').navList())
        </nav>'
    </div>`
)

Я не уверен, будет ли синтаксис конфликтовать с сокращенным знаком доллара jQuery.

...