绑定上的jQuery已被删除，live未被删除

我使用jquery1.8.0将onchange事件绑定到元素。在我的页面中，我有一个清除按钮来清除输入

<div id="wrapper">
    <input id="upload" type="file">
</div>
<button id="button">clear</button>

<script type="text/javascript">
    $("[id='upload']").on("change",
        function()
        {
            alert('changed');
        });
    $("[id='button']").click(
        function()
        {
            $("[id='wrapper']").html($("[id='wrapper']").html());
        });
</script>

当我第一次选择文件时，警报将显示。但是，当我使用按钮清除输入时，警报不再起作用

为了演示这个问题，我创建了一个

---

当使用.live绑定而不是.on绑定时，它可以完美地工作，但我注意到.live方法已被弃用。那么应该使用什么呢？

这是因为当您序列化HTML以用其他HTML替换它时，会丢失绑定事件，字符串中没有位置标记引用

您可以将on与一个普通的非突变祖先一起使用。但是，函数的主体没有太多意义。您正在用相同的HTML替换内容，因此您得到的唯一好处是默认情况下会丢失所有不可序列化的HTML数据

$("#upload").on("change",
        function()
        {
            alert('changed');
        });

$("#button").click(
        function()
        {
            // Something.
        });

---

我还更改了选择器，使其更易于理解。

这是因为当您序列化HTML以替换为其他HTML时，会丢失绑定事件，字符串中没有位置标记引用

您可以将on与一个普通的非突变祖先一起使用。但是，函数的主体没有太多意义。您正在用相同的HTML替换内容，因此您得到的唯一好处是默认情况下会丢失所有不可序列化的HTML数据

$("#upload").on("change",
        function()
        {
            alert('changed');
        });

$("#button").click(
        function()
        {
            // Something.
        });

我还更改了您的选择器，使其更易于理解。

live从document对象委派事件，但on不委派，使用on您应该从元素或document对象的某个静态父级委派事件

live方法提供了一种将委托事件处理程序附加到页面的文档元素的方法，这简化了在将内容动态添加到页面时事件处理程序的使用

live从document对象委派事件，但on不委派，使用on应该从元素或document对象的某个静态父级委派事件

live方法提供了一种将委托事件处理程序附加到页面的文档元素的方法，这简化了在将内容动态添加到页面时事件处理程序的使用

$.live被弃用的部分原因是人们不了解它是如何工作的。如果我是你，我会选择美元，然后做以下事情：

var onChange = function () {
    alert('changed');
};

$("[id='upload']").on("change", onChange);

$("[id='button']").click( function() {
    $("[id='wrapper']").empty().append(
        $("<input/>")
            .prop("type", "file")
            .prop("id", "upload")
            .change(onChange)
    );
});

$.live被弃用的部分原因是人们不了解它是如何工作的。如果我是你，我会选择美元，然后做以下事情：

var onChange = function () {
    alert('changed');
};

$("[id='upload']").on("change", onChange);

$("[id='button']").click( function() {
    $("[id='wrapper']").empty().append(
        $("<input/>")
            .prop("type", "file")
            .prop("id", "upload")
            .change(onChange)
    );
});

---

[id='button']=='button.@alex我知道，我使用[id=]来转义生成的HTML中可能出现的一些字符。我正在使用JSF，但这并不相关-[id='button']=='button.@alex我知道，我使用[id=]来转义生成的HTML中可能出现的一些字符。我正在使用JSF，但这并不相关-这就是我的想法，然而.live方法是有效的。我是否应该继续使用.live方法而不管它是否已被弃用？如果您使用的是已弃用的版本，则可以改为使用on。是的，这就是重点。在我的示例中，on不起作用，因为我“重置”了输入。@siebz0r请参阅我在哪里编写了公共非变异祖先。在您的示例中，这可能是body，但您没有提供足够的上下文来准确判断body是否仍然有效。感谢您的解释+1。答案@undefined posted使用了一个共同的祖先，所以我接受了这个答案。这就是我的想法，然而.live方法是有效的。我是否应该继续使用.live方法而不管它是否已被弃用？如果您使用的是已弃用的版本，则可以改为使用on。是的，这就是重点。在我的示例中，on不起作用，因为我“重置”了输入。@siebz0r请参阅我在哪里编写了公共非变异祖先。在您的示例中，这可能是body，但您没有提供足够的上下文来准确判断body是否仍然有效。感谢您的解释+1。答案@undefined posted使用了一个共同的祖先，所以我接受了这个答案。