Aktualizacja danych od razu po kliknięciu

Question

Witam,

 

W jaki sposób od razu po kliknięciu aktualizować dane? W tym momencie dane aktualizują się dopiero po kolejnym kliknięciu w element:

document.querySelectorAll('.datepicker--cell-day').forEach(node=> {
        node.addEventListener('mouseup', ()=>{
          let dateStart = $('.input-hours-date-start').val();
          let dateStop = $('.input-hours-date-stop').val()
        //   var dt1 = new Date(dateStart);
        //   var dt2 = new Date(dateStop);
        //   function diff_hours(dt2, dt1)
        //   {


        //    var diff =(dt2.getTime() - dt1.getTime()) / 3600000;
        //    return Math.abs(Math.round(diff));

        //   }


        //  console.log(diff_hours(dt1, dt2));
        moment('06-09-2018 17:09','DD-MM-YYYY HH:mm').toDate()
        var date1, date2;
        // "Jan 1, 2018 08:15:10"
                 date1 = dateStop;
                 date2 = dateStart;

                 var dateDest1 = moment(date1,'DD-MM-YYYY HH:mm').toDate();
                 var dateDest2 = moment(date2,'DD-MM-YYYY HH:mm').toDate();
                //  console.log(dateDest1)
                //  console.log(dateDest2)


                 var res = Math.abs(dateDest2 - dateDest1)/1000;


                 // get minutes
                 var hours = Math.ceil(res / 3600);
                 console.log('Godzin:'+hours);



                 let car_price = $('.select_car_hours').find(":selected").data("price");
                 console.log(car_price);
                 let result = car_price*hours;
                 $('.price-hours').html('<span class="coast">Koszt:</span><span class="calculated-price calculated-price-hours">'+result+'</span><span class="currency">pln</span>');



        // var ms = moment(now,"DD/MM/YYYY HH:mm:ss").diff(moment(then,"DD/MM/YYYY HH:mm:ss"));
        // var d = moment.duration(ms);

        // console.log(d.days(), d.hours(), d.minutes(), d.seconds());
      })
    })
    })
  })

 

Comments

Czy za pierwszym razem callback z 2 linijki jest odpalany? Czy 42 linijka odpowiada za aktualizację, czy inna?

---

Tak, ta linijka odpowiada za pokazywanie aktualizacji.

Jednak działa poprawnie dopiero po kolejnym kliknięciu (1 klik: brak, 2 klik: aktualizacja)

---

PS.

Za pierwszym razem nie odpala się

---

Za pierwszym razem nie odpala się

Na której przeglądarce to sprawdzasz? Czy za każdym razem klikasz w dokładnie ten sam element w DOM i w takim samym odstępie czasowym puszczasz przycisk? Czy tylko pierwsze kliknięcie nie odpala callback'a, a każde następne już tak? Czy, jeśli zmienisz event na "click", to działa?

---

Przeglądarka: Vivaldi (Chrome)

Nie, klikam w jeden z kilku elementów generowanych automatycznie (dlatego forEach)

Za każdym kolejnym razem funkcja potrzebuje również podwójnego kliknięcia do działania.

Po zmianie na click problem nadal występuje.

---

Sprawdzałeś na innej przeglądarce? Czy możesz podać minimalną ilość kodu HTML (o ile podany kawałek JS wystarczy), który umożliwi reprodukcję problemu?

---

Uświadomiłem sobie, że w projekcie używana jest biblioteka, która dodaje pickery do pól z datami (one zmieniają wartość w inoucie). Jest mozliwość, żeby sprawdzać, czy wartość pola się zmieniła i dopiero wtedy zbierać wartości?

---

Jest mozliwość, żeby sprawdzać, czy wartość pola się zmieniła i dopiero wtedy zbierać wartości?

Ze sposobów, które przychodzą mi do głowy (zakładając, że nie zmieniasz kodu biblioteki): nasłuchiwać zdarzenia (jeśli jest jakieś emitowane) lub MutationObserver . Z gorszych, to setTimeout/setInterval, a z "inwazyjnych" - Proxy.