Question

单选按钮上的jquery更改功能在它们是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"/>';

?>

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

Answer 1

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

正在使用ajax调用加载。

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

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。

一般语法

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

理想情况下，您应该将document替换为最近的静态容器。

根据您的代码

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

更改通过ajax加载的无线电组的功能

1 个答案: