Javascript 在ajax成功响应中正确地将事件更改附加到select上

我是javascript的新手

我有以下JQuery/AJAX代码来刷新页面中的数据（选择、表格）：

$(document).ready(function () {
    $sport.change(function(){
        var $form = $(this).closest('form');
        var data = {};
        data['sport_id'] = $sport.val();       

        $.ajax({
            type: $form.attr('method'),
            data: data,
            url: Routing.generate('pphb_championnat_liste'),
            success: function(html){

                $('#pphb_sportscoringbundle_findligue_ligue').replaceWith(                     
                    $(html).find('#pphb_sportscoringbundle_findligue_ligue')
                );
                $('#champTable').replaceWith(
                    $(html).find('#champTable')                    
                );

                $('#pphb_sportscoringbundle_findligue_ligue').change(function(){
                    var $form = $(this).closest('form');
                    var data = {};
                    data['ligue_id'] = $(this).val();      

                    $.ajax({
                        type: $form.attr('method'),
                        data: data,
                        url: Routing.generate('pphb_championnat_liste'),
                        success: function(html){                   
                            $('#champTable').replaceWith(
                                $(html).find('#champTable')                    
                            );
                        }
                    });
                });
            }
        });       
    });
}); 

它工作正常：当我更改“sport select”时填充“ligue select”，并刷新表格数据，当我更改“ligue select”时刷新表格数据

但我必须把

$('#pphb_sportscoringbundle_findligue_ligue').change{ ...}

在ajax成功响应中。我想知道如何正确地编写它。

您应该使用动态创建的对象

$(document).on("change", "#pphb_sportscoringbundle_findligue_ligue", function () {

 });

事件委派允许您将单个事件侦听器附加到父元素，该事件侦听器将为与选择器匹配的所有子元素触发，无论这些子元素现在存在还是将来添加