2

動的に生成します

<input type="text" id="foo">
<label for="foo">

そして、リスナーを入力に設定します:

updateWithLabelInputs($("#foo"));

そして機能:

function updateWithLabelInputs(withLabel) {
    withLabel.die("focus").live("focus", function (e) {
        $(this).parent().find('label').hide();
    });
    withLabel.die("blur").live("blur", function (e) {
        if ($(this).val() == '') {
            $(this).parent().find('label').show();
        }
    });    
}

ラベルをクリックすると、イベントが発生するはずですが、発生しません。興味深い: 同じリスナーが既存の (動的ではない) html に適用される場合、動作します。何が問題ですか？リスナーが動的要素に対して機能しないのはなぜですか?

4

1 に答える 1

0

要素を作成してイベントをアタッチするすべてのコードを参照してください。私はあなたが適切な順序でそれをやっていないと思っています:

イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出す時点でページに存在している必要があります。要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。または、次に説明するように、委任されたイベントを使用してイベント ハンドラーをアタッチします。

以前のバージョン:そのようなことをするにはhttps://github.com/brandonaaron/livequeryが必要です。または、以降のバージョンの jQuery を使用してもよい場合は、dieとliveを使用せずに.onと.offを使用します。

于 2013-06-03T14:29:31.220 に答える