jquery - 与 jquery live() 函数的事件绑定

Question

首先是代码：

HTML：

<div id="foreground">
    <button type="button" id="go">Start</button>
</div>
<div id="background">
    <p>You are on the background</p>
</div>

JS：

$(function () {
    $("#go").click(function (e) {
        var $q = $(this);
        var $vazy = $('<button type="button" id="vazy"> Vazy </button>');
        var $loc = $('<input type="text" id="placename" placeholder="Location"/>');

        $vazy.insertAfter($q);
        $loc.insertAfter($q);
        $q.hide();

        e.stopPropagation();

    });

    $("#vazy").live("click", function () {
        alert('k');
        //$("#foreground").hide();
        //$("#background").show();
    });

});

CSS：

#background {
    display: none;
}

jsFiddle...

问题出在第 15 行，#vazy即使使用实时绑定，带有 ID 的按钮似乎也没有响应我的点击事件。我错过了什么吗？

感谢您的任何回复:)

Answer 1

尝试这个

    $("body").on("click","#vazy" function () {
    alert('k');
    //$("#foreground").hide();
    //$("#background").show();
});

Answer 2

.live()已弃用..

尝试使用.on()：

$('body').on("click",'#vazy', function () {
    alert('k');
});

在这里工作

Answer 3

live 不推荐使用on()将事件绑定到动态添加的元素。您可以将事件委托给元素或文档的父级。

现场演示

$(document).on("click", "#vazy", function () {
    alert('k');
    //$("#foreground").hide();
    //$("#background").show();
});

委托事件

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。

Answer 4

您最好的选择：{foreground 是最近的静态容器，将其用作委托}

$("#foreground").on("click",'#vazy', function () {...});