追加された要素の入力変更でイベントが発生しない

Question

私のフォームには、ユーザーが必要に応じて要素を追加するボタンがあります。各入力フィールドには、.change（）ハンドラがあります。問題は、.changeが追加されたフォーム要素では発生しないが、既存のフォーム要素では引き続きトリガされることです。どんな助けもありがとうございます。

$('.element').each(function() { 
$mainElement = $(this); // memorize $(this) 
$sibling = $mainElement.next('input'); // find a sibling to $this. 
$sibling.change(function($mainElement) { 
    return function() { 
     $mainElement.text('My textfield changed'); 
    } 
}($mainElement)); 

Jsfiddleデモ：http://jsfiddle.net/WCDBr/22

Answer 1

わかりやすくするために、コードを貼り付けてコピーします。

[オン] [追加]ボタンをクリックすると、新しく作成された要素の変更イベントが再びバインドされません。これをクリックしてください：

$('#test').click(function(){ 
$('ul').append('<li><p class="element">Lorem ipsum</p><input/></li>'); 
$('.element').each(function() { 
    $mainElement = $(this); // memorize $(this) 
    $sibling = $mainElement.next('input'); // find a sibling to $this. 
    $sibling.change(function($mainElement) { 
     return function() { 
      $mainElement.text('My textfield changed'); 
     } 
    }($mainElement)); 
}); 
}); 

Answer 2

は法に試してみてください。

$(document).on('change', 'input', function() {}); 
//or 
$(document).on('change', '.inputclass', function() {}); 

それは文書で、イベントを登録し、それも新しく追加されたドキュメントのために働く必要があります。既存の要素に登録された変更イベント。