Php 更改通过ajax加载的无线组上的函数

单选按钮上的jquerychange函数在它们是html主体的一部分时正常工作，即当它们在html主体中编写时，但当它们通过ajax请求加载时，change函数不工作。我的代码是- html代码

<form>
    <select id="sel" name="sel">
        <option value="">Select Type</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>

    <div id="load"></div>   
    <label id="change">--</label>
</form>

<script type="text/javascript">
    $(document).ready(function(){
        $('.radi').change(function(){
            console.log( "radio clicked!" );
            $('#change').html("Loaded2: ");
        });

        $("#sel").change(function(){
            var id=$(this).val();
            var dataString = 'id='+ id;
            $.ajax ({       
                type: "POST",
                url: "faculty.ajax_load.php",
                data: dataString,
                cache: false,
                success: function(html){
                    $("#load").html(html);
                    console.log( "radio loaded" );  
                }
            });
        });
    });
</script>

ajax_load.php是：-

<?php

    echo '<input class="radi" type="radio" name="sect" value="P" id="p"/>
    <input type="radio" class="radi" name="sect" value="A" id="a" checked="checked"/>';

?>

---

现在的问题是单选按钮出现了，但当我点击它们时，控制台和标签上并没有显示更改。请帮忙，我哪里做错了

事件处理程序仅绑定到当前选定的元素；在代码进行事件绑定调用时，它们必须存在于页面上

当您使用ajax调用加载时

你需要使用。您必须使用委托事件方法

委派事件的优点是，它们可以处理来自子元素的事件，这些子元素将在以后添加到文档中

一般语法

$(document).on(event, selector, eventHandler);

理想情况下，您应该用最接近的静态容器替换文档

按照你的代码

$("#load").on('change', '.radi', function(){
    console.log( "radio clicked!" );
    $('#change').html("Loaded2: ");
});