0

問題は、jQuery が追加された入力に CSS を追加しないことです。デモンストレーションも作成しましたhttp://jsfiddle.net/heY2u/

HTML:

<div id='container'></div>
<input type="text" value="Test1">

JS:

$('input, textarea, select').on('focusin', function () {
    $(this).data('holder', $(this).attr('placeholder'));
    $(this).attr('placeholder', '');
    $(this).css('outline', '#F78181 solid 1px');
});

$('input, textarea, select').on('focusout', function () {
    $(this).attr('placeholder', $(this).data('holder'));
    $(this).css('outline', '');
});

$('<input type = "text" value = "Test2">').appendTo('#container');

alert(123);
4

1 に答える 1

1

次の行を配置する必要があります。

$('<input type = "text" value = "Test2">').appendTo('#container');

他のjQueryの前。使用している構文は、DOM に既に存在する要素にのみコードを適用するため、失敗しています。そのため、最初に要素を DOM に追加してから、他のコードを適用する必要があります。

jsFiddle の例

または、次のような .on() の委譲構文を使用します。

$(document).on('focusin', 'input, textarea, select', function () {

これにより、既に DOM 内の任意の要素にイベントをバインドでき、後で動的に追加する任意の要素にバインドできます。

ドキュメントから：

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

jsFiddle の例

于 2013-08-25T21:40:38.877 に答える