javascript - jqueryreplaceWithの意味

Question

input type=fileユーザーがアップロードしたいファイルの変更を処理するためにreplaceWithforを使用しています。

私はこのコードを持っています：

$('#add_cv_input').change(function() {
    // here is some code               
    else {
        alert('put one of this: pdf doc docx');
        $("#add_cv_input").replaceWith('<input id="add_cv_input" type="file"/>');
    }
});

ここで問題となるのは、ユーザーが間違った拡張機能を最初にアップロードした後、このjquerychangedイベントが呼び出されないことです。

なぜこれが起こっているのか私にはわかりません。ユーザーが最初に有効な拡張機能をアップロードしてから、それを他の有効な拡張機能に変更すると、すべてが正常に機能します。

score 4 · Accepted Answer

最初のアイテムを破棄すると、イベントハンドラーも一緒に破棄されます。イベントハンドラーを新しいアイテムに配置する場合は、次の2つのオプションがあります。

イベントハンドラーは、作成後に新しいオブジェクトに再インストールできます。
破棄されていない親から委任されたイベント処理を使用できます。

.on()：の動的形式で委任されたイベント処理を使用するのがおそらく最も簡単です。

$(some parent selector).on('change', '#add_cv_input', function() {
    // code here
});

にできるだけ近いが#add_cv_input、破棄されない親セレクターを選択する場合。

要素を置き換えた後にイベントハンドラーを再アタッチする場合は、次のように行うことができます（ただし、委任されたイベント処理の方がクリーンです）。

function processChange() {
    // here is some code               
    else {
        alert('put one of this: pdf doc docx');
        $("#add_cv_input").replaceWith('<input id="add_cv_input" type="file"/>');
        $('#add_cv_input').change(processChange);
    }
});

$('#add_cv_input').change(processChange);

score 3 · Accepted Answer

イベントハンドラーがバインドされていた元の要素を破棄しているため、再度トリガーされません。要素を置き換える代わりに、要素をリセットしてみてください。

編集:単一のファイル入力をリセットすることは自明ではありません(this.value = null;すべてのブラウザで機能するとは限りません)ので、要素を置き換えることはより良いオプションのようです.

新しく作成された要素にイベントハンドラーをアタッチするだけです。[ .replaceAll()]

function cv_input_file(){
    // here is some code               
    else {
        alert('put one of this: pdf doc docx');
        $('<input id="add_cv_input" type="file"/>')
         .replaceAll("#add_cv_input")
         .change(cv_input_file);
    }
}
$('#add_cv_input').change(cv_input_file);

または、イベント委任を使用して、要素を置き換えるたびにハンドラーを追加する必要がないようにします。

$(document/*or the closest static ancestor*/).on('change', '#add_cv_input', function() {
    // here is some code               
    else {
        alert('put one of this: pdf doc docx');
        $("#add_cv_input").replaceWith('<input id="add_cv_input" type="file"/>');
    }
});

javascript - jqueryreplaceWithの意味

2 に答える 2

Related

Reference