jQuery + - przyciski nie wprowadzają wartości zgodnie z oczekiwaniami - jquery, przyrost

Mam moduł ajax, który aktualizuje cenystrona internetowa, gdy klienci zmieniają ilość lub wybrane atrybuty, których potrzebują. Po wprowadzeniu wartości w polu wprowadzania cena jest aktualizowana. Postanowiłem dodać kilka ładnych przycisków jQuery, aby zwiększyć wartość, zamiast użytkownik musiał kliknąć pole, a następnie wpisać ilość. Problem polega na tym, że skrypt, którego używam do tworzenia przycisków, nie wywołuje zmiany ceny, nawet jeśli zmienia wartość w polu wprowadzania.

Mój skrypt to:

<script language="javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#cartAdd").prepend("<div class="dec button">-</div>");
jQuery("#cartAdd").append("<div class="inc button">+</div>");
jQuery(".button").click(function() {
var $button = jQuery(this);
var oldValue = $button.parent().find("input").val();

if ($button.text() == "+") {
var newVal = parseFloat(oldValue) + 1;
} else {
if (oldValue >= 1) {
var newVal = parseFloat(oldValue) - 1;
}
}
$button.parent().find("input").val(newVal);
});
});
</script>

Czy jest jakiś sposób, aby wykonać tę funkcję, aby aktualizator cen rozpoznał nową wartość w polu wejściowym?

Odpowiedzi:

1 dla odpowiedzi № 1

Możesz skorzystać z delegowania wydarzeń, abyś nie musiał się martwić o transmisję na żywo, a jeśli szukasz zdarzenia zmiany do uruchomienia, musisz to zrobić ręcznie, jak powiedział Tetaxa. Coś takiego:

<script language="javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
var $cartAdd = jQuery("#cartAdd")
, $quantity = $cartAdd.find("input")
, $price = jQuery("#price");

$cartAdd.prepend("<div class="dec button">-</div>");
$cartAdd.append("<div class="inc button">+</div>");

$cartAdd.click(function(evt) {
var $incrementor = jQuery(evt.target)
, quantity = parseInt($quantity.val(), 10);

if($incrementor.hasClass("inc")) {
quantity += 1;
} else if($incrementor.hasClass("dec")) {
quantity += -1;
}

if(quantity > 0) {
$quantity.val(quantity).change();
}
});

$quantity.change(updatePrice);

function updatePrice() {
var price = 15.50
, quantity = parseInt($quantity.val(), 10);
$price.text(quantity * price);
}
});

</script>

Tutaj jest jsFiddle z działającym kodem.

Edycja: Dodałem kod, który obsługuje zdarzenie zmiany na wejściu ilości.

Edycja 2: Widzę teraz, jaki jest problem. Po przejrzeniu źródła wydaje się, że szukasz tylko przycisku onkeyup przy wprowadzaniu tekstu, więc wywołanie zmiany nie przyniesie żadnego efektu. Aby rozwiązać twój bezpośredni problem, zastąpiłbym powyższe:

      if(quantity > 0) {
$quantity.val(quantity).change();
}

i zamiast tego

      if(quantity > 0) {
$quantity.val(quantity);
xhr.getPrice();
}

---

2 dla odpowiedzi nr 2

Musisz użyć funkcji delegowania dla elementów ładowanych po załadowaniu strony

jQuery(document).on("click",".button",function(){
//Code here
});

Dokumentacja dla .na()

---

1 dla odpowiedzi nr 3

try this 1...

jQuery(".button").on("click",(function() {
var $button = jQuery(this);
var oldValue = $button.parent().find("input").val();

if ($button.text() == "+") {
var newVal = parseFloat(oldValue) + 1;
} else {
if (oldValue >= 1) {
var newVal = parseFloat(oldValue) - 1;
}
}
$button.parent().find("input").val(newVal);
});

---

0 dla odpowiedzi nr 4

Jeśli dobrze cię rozumiem, wartość wzmieniono pole wejściowe, ale do zdarzenia zmiany dołączono obsługę zdarzeń, która nie jest wyzwalana, czy to prawda? Jeśli tak, zmień kod na ten, aby ręcznie uruchomić zdarzenie:

$button.parent().find("input").val(newVal).change();

---