jQuery dynamiczne dodawanie treści - nie działa akcja przycisku

Question

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 () {
na
$(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ą

Comments

Może na tą chwilę taki workaround  

$(document).on('mouseenter', '#basketIcon', function () {
  $('#basketIcon').attr({'disabled' : 'true'});
  $('#basketIcon').trigger('click');
})
$(document).on('click', '#basketIcon', function () {
  $.ajax({
    type: 'GET',
    url: '{{ route('basket') }}',
    success: (data) => {
      $('#short-content').html(data);
      $('#basketIcon').attr({'disabled' : 'false'});
    }
  })
})

wtedy masz dostępny click i mouseenter

---

trochę nie działa :/

1. Przycisk usuwania po dynamicznym dodaniu dalej nie wykonuje swojej akcji

2. Po kliknięciu wspomnianego przycisku usuwania akcje pobierania wykonuje się w nieskończoność

---

A taki zapis

var ajax_action = true;

$(document).on('mouseenter', '#basketIcon', function () {
  if (ajax_action) {
    ajax_action = false;
    shortContent();    
  }
})
function shortContent() {
  $.ajax({
    type: 'GET',
    url: '{{ route('basket') }}',
    success: (data) => {
      $('#short-content').html(data);
      ajax_action = true;
    },
    error: (xhr) => {
      ajax_action = true;
    }
  })
}

 

---

nie zapętla itd jednak kliknięcie przycisku usuń dalej nie powoduje żadnej akcji, czyli w zasadzie to samo co opisałem na początku

---

A sprawdzałeś w devtool-sie jak wygląda kod z ajax-a wstawiany, czy poprawnie jest przypisywany event do przycisku usuń po wstawieniu kodu, czy wskazuje na prawidłowy element html itp.