Dynamicaly add ajax form item and add event on checkbox

I've added an ajax callback to my form to add some data on it :

$form['add'] = [
    '#type' => 'button',
    '#value' => t('add'),
    '#ajax' => [
        'callback' => [$this, 'ajaxFormAdd'],
        'event' => 'click',
        'wrapper' => 'contacts',
        'progress' => [
            'type' => 'throbber',
            'message' => $this->t('Ajout d\'un contact...'),
        ],
    ],
];

This is how I render the new fields (they're appended into a specific div)

public function ajaxFormContact(array &$form, FormStateInterface $form_state) {
    /** @var \Drupal\Core\Ajax\AjaxResponse $response */
    $response = new AjaxResponse();

    $index = 0;
    $collapseId = 'collapse-contact-' . $index;
    $toggle = '<button class="btn btn-primary collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#' . $collapseId . '" aria-expanded="true" aria-controls="' . $collapseId . '">Contact ' . $index . '</button>';
    $collapse = '<div class="collapse show" id="' . $collapseId . '"><div class="card card-body"></div></div>';
    $contact = $this->buildSingleContact($index);
    $response->addCommand(new AppendCommand('#contacts', $toggle . $collapse));
    $response->addCommand(new AppendCommand('#' . $collapseId . ' > .card', $contact));
    $form_state->setRebuild();
    return $response;
}

And those are the fields added :

public function buildSingleContact(int $index) {
    $contact_single['contacts'][$index]['firstname'] = [
        '#type' => 'textfield',
        '#title' => 'firstname',
        '#attributes' => [
            'data-drupal-selector' => "edit-contacts-$index-firstname",
            'id' => "edit-contacts-$index-firstname",
            'name' => "contacts[$index][firstname]",
        ]
    ];
    $contact_single['contacts'][$index]['extraInfo'] = [
        '#type' => 'checkbox',
        '#title' => $this->t('Add info'),
        '#prefix' => '<div class="form-check form-switch">',
        '#suffix' => '</div>',
        '#attributes' => [
            'data-drupal-selector' => "edit-contacts-$index-extraInfo",
            'id' => "edit-contacts-$index-extraInfo",
            'name' => "contacts[$index][extraInfo]",
        ],
        '#ajax' => [
            'callback' => [$this, 'ajaxFormExtra'],
            'event' => 'change',
            'progress' => [
                'type' => 'throbber',
            ],
        ],
    ];
    return $contact_single;
}

So this is my problem:

The ajax on my button is working because the button is on the page when the page is loaded.

But the checkbox extraInfo has no event, because the contact is created after the js is loaded.

So how do I add the change event on my newly added checkboxes ? Is it possible to add like a "$(selector).on('click')" instead of "$(selector).click()" ?