How can I select a checkbox that appears after an ajax request? [duplicate]

This question already has an answer here:

• Event binding on dynamically created elements? 14 answers

I have the following jQuery code:

$( document ).ready(function() {
  $('#id_is_multiple_0').prop('checked', true);
  $('#id_event').empty().append($('<option>', {value:'',text: '---------'}))
});
$('#id_client').on('change', function(e){

    var event_list = $('#id_event')
    var event_multiple = $('#id_sections')
    event_list.empty().append($('<option>', {value:'',text: '---------'}))
    event_multiple.empty()
    $.ajax({
      url: '/api/geteventtypes/',
      async: true,
      data: 'client='+$(this).find("option:selected").text(),
      success: function(data) {
        for (var i = 0; i < data.length; i++) {
            event_list.append($('<option>', {
                value: data[i].id,
                text: data[i].name
            }));
            event_multiple.append('<div class="col-sm-2"><input class="sections" name="event_multiple" value="'+ data[i].id +'" type="checkbox">       '+ data[i].name +'</div>')
            }
        },
    });
});

This works well, but when I try:

$('.sections:checkbox').change(function() {
    console.log('foo');
});

It doesn't do anything. If I try only :checkbox it works with every checkbox, but not with the ones created by the ajax event.

How can I select only the .sections checkboxes if they are created after the page load?

Thanks.