ライブの要素へのjqueryバインドプラグイン

Question

私は、ユーザーがその場で（JavaScript経由で）生成している入力テキストフィールドをいくつか持っています。これらのフィールドには整数しか受け入れないので、英数字プラグインを使用しています。プラグインは、ページが読み込まれたときに既に存在する要素に対して期待どおりに機能しますが、新しいオンザフライ要素では機能しません。このプラグインに新しい要素をライブバインドするにはどうすればよいですか？ありがとう！

ここにいくつかのサンプルコードがあります。

http://jsfiddle.net/ctown4life/tZPg4/780/

Answer 1

シンプルなクイックフィックス - 変更：

$('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" class="intonly" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv); 

$('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" class="intonly" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').numeric().appendTo(scntDiv); 

に動的に挿入フィールドはすべて同じIDを取得していることに注意してください。それは良くありません。入力ごとに一意のIDを使用するか、IDを全く使用しないでください。

Answer 2

liveここでお手伝いしません。ここで

$('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" class="intonly" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>') 
    .appendTo(scntDiv) 
    .find('input').numeric(); 

Answer 3

あなたはあなただけの問題がある。この

$('#addScnt').live('click', function() { 
       $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" class="intonly" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv).find("input").numeric(); 

必要

http://jsfiddle.net/tZPg4/781/

行く：あなたは新しい入力を追加するたびにプラグインを再起動する必要があります新しく作成された入力ボックスに numbericプラグインを実行していないため、 liveを使用しているからではありません。

Answer 4

一つの方法は、ちょうどあなたの動的な入力のための英数字のプラグインを呼び出すことです：

$('#addScnt').live('click', function() { 
    $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" class="intonly" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv); 
    i++; 
    $('#p_scents p:last input').numeric(); // Added this line... 
    return false; 
}); 

Answer 5

ちょうど新しく追加入力フィールド上の.numeric（）メソッドを呼び出します。 .appendTo（scntDiv）を行った後、あなたが呼び出す：

scntDiv.children('p:last .intonly').numeric(); 

全コード：（数字の `の呼び出しが）`の呼び出しの前に挿入することができることを実現するための

http://jsfiddle.net/ebiewener/tZPg4/782/