将更改事件绑定到由ajax请求填充的<select> </select>

Question

我在我的项目中有两个元素，第一个元素有一个更改侦听器，就像这样填充第二个元素。

<select id="user_id" style="width: 100%;">
     <option value=""></option>
     <?php foreach ($clients as $client) : ?>
     <option value="<?php echo $client['Client']['id'] ?>"><?php echo $client['Client']['name'] ?></option>
     <?php endforeach; ?>
</select>

<select id="pet_id" style="width: 100%;" disabled>
     <option value=""></option>
</select>

-

$('#user_id').change(function() {
    var client = {
        client_id: $(this).val()
    };
    $.ajax({
        type: "POST",
        url: "<?php echo Router::url(array ('controller' => 'grooming', 'action' => 'getClientById')); ?>",
        data: client,
        success: function(data)
        {
            var json = JSON.parse(data);
            if (json.result === "success") {

                    $('#pet_id').select2('data', null);
                    $('#pet_id').empty();

                    $.each(json.list, function() 
                    {
                        $('#pet_id').append($("<option/>").val(this.breed_id).text(this.name));
                    });

                    if(!$('#pet_id').is(':enabled')){
                        $('#pet_id').removeAttr('disabled');
                    }

            }
            else
            {
                    $('#pet_id').attr('disabled', 'disabled');
                    $('#pet_id').select2('data', null);
                    $('#pet_id').empty();
            }
        }
    });

});

现在我必须向第二个选择器（#pet_id）添加另一个更改侦听器，但它不能正常工作。

$('#pet_id').on('change',function (){
    alert('finally worked :)');
});

$('#pet_id').bind('change',function (){
    alert('finally worked :)');
});

¿我做错了什么？

提前致谢。