Question

我使用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方法已被弃用。那么使用什么呢？

Answer 1

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

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

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

Answer 2

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

您可以将on()与常见的非变异祖先一起使用。但是，你的功能正文并没有太大的意义。您使用相同的HTML替换内容，因此您获得的唯一好处是默认情况下丢失所有不可序列化的HTML数据。

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

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

我也改变了你的选择器，使它们更易于理解。

Answer 3

$.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)
    );
});

关于绑定的jQuery被删除，live不会

3 个答案: