单击按钮时未触发更改事件

Question

I'm using a script to copy the text of the source element to the target element when the quantity changes, either by arrow keys or clicking the + or minus buttons.

 $(':input').on('change keyup', function() { var subtotal = $('.p.price.amount').text(); $('.price.amount').text(subtotal); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="quantity buttons_added"> <input type="button" value="-" class="minus"> <input type="number" name="quantity" value="1" title="Qty" class="input-text qty text"> <input type="button" value="+" class="plus"> </div> <p class="price">Subtotal <span class="amount">$12.50</span></p>

If I click in the input box and use the arrow keys, it works fine but when I click the plus or minus keys, the target value is one behind the source value.

Any help appreciated.

Answer 1

You don't have any code that runs when the buttons are clicked because buttons don't have values that change through user input, nor do they respond to keyup events. You say that you've got the buttons sort of working, but if that's the case, there's more code that you have that you didn't post.

See the comments inline below:

 $(function(){ const basePrice = 12.5; // Set base price in code for easy changes later // Get references to elements you'll work with const $input = $("input.qty"); const $output = $('.price >.amount'); let qty = 1; // Keep track of qty // Initialize the output $($output).text(basePrice.toFixed(2)); // Handle changes made to the input type=number $('input.qty').on('input', function() { updateSubtotal(); }); // Handle clicks to the buttons $('.minus, .plus').on('click', function() { updateSubtotal($(this)); // Send clicked button reference to the function }); // Figure out the answer function updateSubtotal($btn){ // If a button got us here... if($btn){ // Increase or decrease the quantity based on which button was clicked $btn.val() === "+"? qty++: qty--; $input.val(qty); // Update the input type=number } qty = $input.val(); $output.text((basePrice * $input.val()).toFixed(2)); // Update the total } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="quantity buttons_added"> <input type="button" value="-" class="minus"> <input type="number" name="quantity" value="1" title="Qty" class="input-text qty text"> <input type="button" value="+" class="plus"> </div> <p class="price">Subtotal $<span class="amount"></span></p>