Question

我目前在一个具有注销按钮的网站上工作，只要窗口达到一定大小，该按钮就会动态地插入到侧边栏中。当我单击注销按钮时，我想调用方法logOut();

我查看了其他帖子，但解决方案似乎对我不起作用。如果我在主页上单击该元素，则会调用该方法，但是当我调整窗口大小并且该元素被“重新添加”到网页时，它不会执行任何操作（ID选择器是正确的，因为样式就在那里）。

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

我希望单击锚标记后会调用logOut()方法，但是即使.on()方法可以处理动态创建的元素，它也不会执行任何操作

编辑：这是在调整大小后如何将元素重新添加到页面中。包含注销锚点标记的nav元素通过navList();方法制成列表，然后附加到正文中。我确保指定注销按钮需要保留其ID。只添加与注销按钮相关的代码。

$.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

不要让您的内心烦恼， jQuery .on() 绝对与动态注入的元素一起使用。那么，是什么导致它在这种情况下不起作用？

首先，最常见的原因是：拼写和/或大写。您没有大写其中一个字符吗？例如#btnLogOut与#btnLogout

不同

第二个同样常见的错误：页面上的ID重复。更改所需按钮的ID，然后再次测试（在ID的末尾添加三个字符的后缀_zq-一个不太可能的字符串后缀-并记住同时更改HTML ID和ID jQuery引用）。

有时候，您只需要更加具体即可。尝试添加一些父ID和类，而不要使用#btnLogOut。例如，如果这是您的结构：

<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>

然后创建您的jQuery语句：

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

如何测试您拥有的物品

在按钮已添加到页面并在屏幕上可见的位置：

右键单击按钮，从弹出菜单中选择Inspect Element
Chrome的DevTools将打开
如果控制台在DevTools窗口的下半部分不可见，请按 Esc
在控制台输入区域中，输入：$('#btnLogOut').length

您应该看到数字1出现在该行下面。

如果收到消息Uncaught TypeError: $ is not a function，则应首先inject jQuery into DevTools，然后再次尝试步骤4。

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

1 个答案: