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行，即使使用实时绑定，ID为#vazy的按钮似乎也不响应我的点击事件。我错过了什么吗？

感谢您的回复：）

Answer 1

试试这个

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

Answer 2

.live()已被弃用..

尝试使用.on()：

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

作品here

Answer 3

不建议使用

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

<强> Live Demo

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

委派活动

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序。

Answer 4

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

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

使用jquery live（）函数绑定事件

4 个答案:

委派活动