3

ファイル入力があります

<input type=file class=file-input/>

もともとページに1つあり、ページの「追加」ボタンをクリックして動的に作成できます。追加するたびに、次のことを行います。

$(".file-input[type=file]").change(alert("hello"))

追加を 1 回クリックすると、ページに 2 つのファイル入力が表示されます。最初のファイル入力をクリックすると 2 つのアラートが表示されますが、2 番目のファイル入力をクリックすると 1 つのアラートが表示されます。理由は、最初のファイル入力の onChange イベントにアラート ("hello") を 2 回追加し、2 番目のファイル入力に 1 回追加したためです。

各ファイルが alert("hello") を 1 回だけ入力するようにする方法はありますか?

4

3 に答える 3

5

いくつかのオプションがあります。1 つは、jquery のonでイベント委任を使用することです。このように、ハンドラーを最初に共通の親に一度アタッチすると、新しいハンドラーが作成されたときに再度アタッチする必要がなくなります。このようなもの：

$("<some common parent>").on("change", ".file-input[type=file]", function(){
    ...
});

ここでの共通の親はdocument、絶対に必要な場合です。ただし、理想的には、これはすべてのファイル入力に共通のセレクタであるべきです。

別のオプションは、作成時にイベントを個々の要素に単純に添付することです。

$("<input>")... stuff  
    .change(...)

このようにして、既存のすべての要素ではなく、その 1 つの要素にのみアタッチします。

于 2013-04-24T23:19:31.287 に答える
2

ページの初期化で一度実行する必要があります。

回避策として、off() を使用して以前のハンドラーをデタッチします。

$(".file-input[type=file]").off('change').on('change',function(){
alert("hello");
});
于 2013-04-24T23:36:43.297 に答える
1

新しく作成された各要素を再バインドしようとする代わりに、単一のイベントをバインドして、現在または将来の一致する要素に適用でき$.on()ます。

$(document).on("change", ".file-input[type=file]", function(event) {
    alert("hello");
});

これを行う必要があるのは、ページの読み込み時に 1 回だけです。

于 2013-04-24T23:19:29.033 に答える