0

我正在使用 jQuery 1.8.0 将onchange事件绑定到<input type="file">元素。在我的页面中，我有一个清除按钮来清除输入。

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

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

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

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

4

3 回答 3

3

live从文档对象委托事件，但on不委托，使用on您应该从元素或文档对象的静态父对象之一委托事件。

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

$('#wrapper').on("change", "#upload", function() {
     alert('changed');
});
于 2012-09-06T11:49:28.793 回答
1

这是因为当您序列化 HTML 以将其替换为其他 HTML 时，您会丢失绑定事件（字符串中没有地方可以标记引用）。

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

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

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

我还更改了您的选择器以使它们更易于理解。

于 2012-09-06T11:46:54.093 回答
0

$.live()被弃用的部分原因是人们不了解它是如何工作的。如果我是你，我会$.on()去做以下事情：

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)
    );
});
于 2012-09-06T12:13:36.677 回答