同じグループの動的に作成されたチェックボックスをクリックしてイベントをトリガーする方法

Question

最初に同名のチェックボックスが3つあり、1つのチェックボックスが動的に作成されます。私は3つの初期チェックボックスのいずれかをクリックすると、それはイベントを引き起こしますが、新しく作成されたものではありません。

<input type="checkbox" name="NewMerheckbox" id="1"/> 
<input type="checkbox" name="NewMerheckbox" id="2"/> 
<input type="checkbox" name="NewMerheckbox" id="3"/> 
<div id="newcheckbox"> 

</div> 

と

$('input[type="checkbox"][name="NewMerheckbox"]').on('click', function() { 
alert($(this).attr('id')); 
}); 
$('#newcheckbox').html('<input type="checkbox"name="NewMerheckbox" id="4"/>'); 

Answer 1

ちょっとそれはあなたがそのオブジェクトにクリックハンドラを追加しようとしている

$(document).ready(function() { \t 
 
$('#newcheckbox').html('<input type="checkbox"name="NewMerheckbox" id="4"/>'); 
 
\t \t $("input[name='NewMerheckbox']").on("click", function() { 
 
\t \t alert("HeyI am calling same Function My Id Is " + $(this).attr('id')); 
 
\t }); 
 
\t 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="NewMerheckbox" id="1"/> 
 
<input type="checkbox" name="NewMerheckbox" id="2"/> 
 
<input type="checkbox" name="NewMerheckbox" id="3"/> 
 
<div id="newcheckbox"> 
 

 
</div>

Answer 2

のに役立ちます。この更新1人の希望をお試しくださいまだ存在しません。 jQueryを使用すると、クリックハンドラを親要素に追加することができます。これにより、特定の子でのみトリガされるようになりますが、クリックハンドラが設定されているときに子要素が存在する必要はありません。

$('body').on('click', 'input[type="checkbox"][name="NewMerheckbox"]', function() { 
    alert($(this).attr('id')); 
}); 

これは、自身のイベントと子要素をクリックして処理しますbodyに設定するクリックハンドラーが発生します。追加の引数は、セレクタに一致する子のみがハンドラをトリガするように、フィルタ処理されるイベントを扱います。ハンドラはbodyにあるため、ハンドラの作成時に対象の子が存在する必要はありません。もちろん、より適切な親要素を使用することができます。これは、.on()に記載されています。