1

クラスの TextBoxes があり、ボタンをクリックすると、同じクラスの別の要素が追加されます。

新しい TextBox がそのクラスの残りの部分と同じように動作するようにするにはどうすればよいですか?

例: http://jsfiddle.net/GCQKE/

HTML:

<div class="container">
    <input id="textbox1" type="text" class="textbox" />
    <input id="textbox2" type="text" class="textbox" />
    <input id="textbox4" type="text" class="textbox" />
</div>
<input type="button" class="append" value="Append new TextBox" />

Jクエリ

$(".append").click(function (e) {
    $(".container").append("<input id='textbox3' type='text' class='textbox' />");
});


$(".textbox").click(function (e) {
    alert($(e.target).attr("id"));
});

すべてのテキストボックスをクリックすると、ボタンのクリックで生成されたものを除いて、アラートが表示されます。なにか提案を？

4

2 に答える 2

1

.click(...)ページロード時にそのクラスを持つ要素にのみバインドします。

関数をクラスのすべての要素に現在または将来 (ページロード時に存在するか、動的に挿入される) にバインドする場合は、jquery のデリゲートを使用します...

http://api.jquery.com/delegate/

交換

$(".textbox").click(function (e) {
    alert($(e.target).attr("id"));
});

と

$('.container').delegate('.textbox', 'click', function(e){
    alert($(e.target).attr("id"));
});
于 2013-03-15T14:29:36.843 に答える
1

デモ (jsfiddle を更新)

.on()これを行うには、 for future 要素の正しい構文を使用して、コードの実行時に存在する親にイベントをバインドし、実際にイベントをバインドする子のセレクターを指定します。

$('.container').on('click', '.textbox', function() {
   //alert($(this).attr("id"));
   console.log(this.id);
});
于 2013-03-15T14:35:30.067 に答える