jQuery click does not work on append

Question

$('.spinner').on('click', '.btn:first-of-type', function() {
  var $input = $(this).closest('.numeric-btn').find('.spinner input');
  $input.val( parseInt($input.val(), 10) + 1).keyup();
});

When I replace div where is .spinner class with

$('.side-form > div.cart-form').replaceWith(cart_form);

Then click event does not work. What can be the problem ?

@Andrey I'm gonna bookmark that link - there's at least 10 questions like this every day! — freedomn-m, Sep 15 '15 at 13:59

score 1 · Accepted Answer · answered Sep 15 '15 at 14:00

You need to bind the delegate to something higher in the DOM.

You could use $(document), but I would target the next parent up from where you are doing your DOM manipulation. As an example:

<div id='container-parent'>
    <div class='spinner'>
        <div class='btn btn-default'>
        </div>
    </div>
</div>

Then you could bind to 'container-parent':

$('#container-parent').on('click', '.btn:first-of-type', function(){...}

That should allow the delegate to stay remain intact.

Thanks only your example works correctly. – Wizard Sep 15 '15 at 14:30 — Wizard, Sep 15 '15 at 14:30

jQuery click does not work on append

1 Answers1