0

onchangeイベントを<input type="file">要素にバインドするためにjQuery 1.8.0を使用しています。私のページには、入力をクリアするためのクリアボタンがあります。

<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 に答える