选中的单选按钮发送AJAX呼叫，单选按钮附加

Question

我只是试图检查一个单选按钮发送AJAX调用和单选按钮追加使用JavaScript。

我尝试了几件事，但未能做到这一点：

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++;
}

添加此单选按钮后，点击任意一个单选按钮上有四个单选按钮发送此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

您应该使用事件委派，因为新添加的元素不会附加事件监听器：

注意事件处理程序附加到NEAREST静态元素，我们正在使用click。该值只能来自此收音机，因此除非您有更多的收音机，否则无需扫描dom以查看收音机

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

事件委派不会将事件监听器直接附加到.chal_bhi_radio。但相反，它会将它们附加到另一个元素（此处为document）。因此，当单击该元素时，它将检查目标元素是否与选择器匹配（第二个参数".chal_bhi_radio"）。阅读有关事件委派的更多信息。