使用 jQuery .on() 方法不会在动态创建的元素上绑定事件

Question

I am currently working on a website that has a logout button which gets dynamically inserted into a sidebar whenever the window reaches a certain size. When I click on the log out button I want to call the method logOut();

I looked over these other posts and the solutions don't seem to be working for me. The method gets called if I click on the element while it's on the main page, but when I resize the window and the element gets "re-added" to the webpage it doesn't do anything (The ID selector is the right one because the style is all there).

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

I expected the logOut() method to be called after clicking on the anchor tag, but it doesn't do anything even if the .on() method is supossed to take care of dynamically created elements

EDIT: This is how I re-add the element to the page after resizing. The nav element that includes the logout anchor tag is made into a list by a navList(); method and then gets appended to the body. I made sure to specify that the logout button needs to keep its ID. Only going to add the code relevant to the log out button.

$.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>'
            )
                .appendTo($body)

Answer 1

Let not your heart be troubled, jQuery .on() absolutely works with a dynamically-injected element. So, what could be causing it to not work in this instance?

First, most common, cause: spelling and/or capitalization. Did you not capitalize one of the characters? For eg #btnLogOut is not the same as #btnLogout

Second, equally common error: duplicate IDs on the page. Change the ID for the button you want and test again (add the three-character suffix _zq to the end of the ID - a suitably unlikely string suffix - and remember to change both the HTML ID and the ID referenced by jQuery) .

Sometimes, you just need to be more specific. Instead of #btnLogOut , try adding some parent IDs and classes. If, for example, this was your structure:

<div class="row bob">
    <div class="container sam ed tom">
        <div class="dialog frank lg pc6">
            <div class="dlg-bottom">
                <button id="btnLogOut">Log Out</button>

then make your jQuery statement:

$(document).on('click', '.row .container .dialog .dig-bottom #btnLogOut', function(){
    //code goes here
});

How to test what you have:

At the point where the button has been been added to the page and is visible on screen:

1. Right-Click on the button, choose Inspect Element from the pop-up menu

2. Chrome's DevTools will open

3. If the console is not visible as the bottom half of the DevTools window, press Esc

4. In the console input area, type: $('#btnLogOut').length

You should see the number 1 appear below that line.

If you get the message Uncaught TypeError: $ is not a function , then you should first inject jQuery into DevTools and try step 4 again.