チェックされたラジオボタンがAJAXコールとラジオボタンを送信する

Question

ラジオボタンをチェックしてみると、JavaScriptを使用してAJAXコールとラジオボタンが追加されます。

、私はいくつかのことを試してみたが、この権利を取得することができていない：APPENDこのラジオボタンの後

for (var i = 0; i < response.split(',').length; i++) { 
    $('#radio_append').append('<input name="suggested_dates" id="suggested_dates'+count+'" value="' + response.split(',')[i] + '" class="styled chal_bhi_radio" type="radio" /><label for="suggested_dates'+count+'">' + response.split(',')[i] + '</label> <br> ') 
    count++; 
} 

を、いずれかのラジオボタンをクリックして上の4つのラジオボタンは、このAJAX呼び出しを送ってあります。

私はいくつかのことを試みていますが、うまくいきませんでした。

任意のチェックボックスをオンにすると、警告ボックスは表示されませんでした。これらのラジオボタンはJavaScriptから追加されます。

$(".chal_bhi_radio").on('change', function() { 
     alert("HI"); 
     var date_al = $(".chal_bhi_radio:checked").val(); 
     $.post("<?php echo $site_root;?>common/service.php?j=4", { 
      date_select: date_al 
     }, 
     function(response) { 
      if (response != '') { 
      per_data = $.parseJSON(response); 
      if (per_data != 0) { 
       $("#price_special_append").html(""); 
       add_basic = per_data; 
       $("#price_special_append").append(" € " + add_basic + " ") 
      } 
      } 
     }); 

Answer 1

あなたは、新たに追加要素が、それらに添付イベントリスナーがありませんように、イベントの委任を使用する必要があります。

注意をイベントハンドラは最寄りの静的な要素に取り付けられています。クリックを使用しています。あなたがそれらのより多くのセットを持っていない限り値はONLY

$('#radio_append').on("click", ".chal_bhi_radio",function(){ 
    alert("HI"); 
    var date_al = $(this).val(); 
}); 

このラジオから確認無線のDOMをスキャンするので、必要に来ることはできないイベント委任は .chal_bhi_radioに直接イベントリスナーを添付しません。代わりに、別の要素（ここでは document）にアタッチします。したがって、その要素がクリックされると、ターゲット要素がセレクタ（第2引数 ".chal_bhi_radio"）と一致するかどうかがチェックされます。イベント委任の詳細を読む。