更改通过ajax加载的无线电组的功能 - change function on radio group loaded through ajax

change function on radio group loaded through ajax

本文关键字：无线电功能加载 ajax | 更新日期: 2023-09-27

当单选按钮是HTML主体的一部分时，即当它们在HTML主体中编写时，但是当它们通过ajax请求加载时，更改功能不工作。我的代码是——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调用加载时。

您需要使用事件委托。您必须使用.on()使用委托事件方法。

委托事件的优点是，它们可以处理来自后代元素的事件，这些事件稍后会添加到文档中。

一般语法

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

理想情况下，你应该用最接近的静态容器替换document。

按照你的代码

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