Asynchroniczne ładowanie widoku - nie działa akcja przycisku

Cześć,
mam taki kod

<script>
    $(document).on('click', '#basketIcon', function () {
        $.ajax({
            type: 'GET',
            url: '{{ route('basket') }}',
            success: (data) => {
                $('#short-content').html(data);
            }
        })
    })
</script>

data zwraca kod html który jest dynamicznie dodawany. Jest tam m.in button odpowiedzialny za usuwanie elementu z koszyka. Ogólnie ten kod który dałem powyżej działa idealnie jednak nie chcę aby akcja wykonywała się po kliknięciu w ikonę koszyka tylko najechaniu na nią. Jeśli zamienię ten fragment

$(document).on('click', '#basketIcon', function () {

$(document).on('mouseenter', '#basketIcon', function () {

akcja wykona się, kod zmieni się dynamicznie jednak przycisk usuwania który jest w tym kodzie nie działa, nie wykona żadnej akcji
jednym słowem, działa dla click nie działa dla najechania myszą

Po pierwsze, to staraj się nie mieszać w taki amatorski sposób template'ów i logiki Twojej aplikacji, mam tutaj na myśli: url: '{{ route('basket') }}',. Znajdź inny sposób jak przekazać url'a do JS'a, np poprzez wrenderowanie go w <script type="application/json">.

Po drugei, to co opisujesz wygląda jakbyś chciał dodać akcję na :hover. Czemu nie wyrenderujesz tego <div>a z czym tam nie chcesz po prostu w template, i nie pokazujesz go stylami CSS? Ewentualnie dynamiczne treści mógłbyś dodać AJAX'em, ale już niezależnie od widoku. Bo teraz to masz pomieszane.