How to get dynamically loaded elements to initialize after an ajax call?

Question

I am using numericstepper.js for my input textbox spinner. it works when I have the following code.

<script src="<?= site_url('assets/js/numericstepper.js') ?>"></script>
<script>
$('.continue-participation-btn').click(function(e) {
  e.preventDefault();
  var $form = $('form[name="apr-grade-participation-form"]').serialize();
  $.ajax({
    url: '/ajax/continue_participation',
    type: 'POST',
    data: $form,
    success: function(res) {
      if (res) {
        $('.continuous-section').html(res);
        $('html, body').animate({
          scrollTop: 0
        }, 900, function() {
          $('.participation').removeClass('visible').addClass('completed-section');
          $('.continuous-section').addClass('visible');
        });
      } else {
        alert('Unable to process request');
      }
    }
  });
});
</script>

<label for="">Number of Students</label>
<span class="numeric-stepper" style="display: block;"> 
    <input size="2" class="number-of-day-input" id="day_<?=$part_count;?>" name="partdetail_pk_5[<?=$part_count;?>][day]" type="text" placeholder="000" pattern="[0-9]*" value="">
    <button type="button" name="ns_button_1" maxValue = 999 value="1" class="plus">+</button>
    <button type="button" name="ns_button_2" value="-1" class="minus">-</button>
 </span>

However, when I use Ajax to load a page with input spinner textbox, it doesn't work. Anyone have an idea to solve this issue? Thanks

Thanks Samuel to edit my question. I am pretty new in stackoverflow.. :) — Angela Chan, Aug 10 '15 at 03:57
Can you share the code that is requesting and inserting this content into the page? Are any errors occurring? For some general guesses: [Can scripts be inserted with innerHTML?](http://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml) and/or [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Jonathan Lonowski, Aug 10 '15 at 03:57

Samuel Liew · Answer 1 · 2015-08-10T04:03:43.357

0

You will need to initialize the new spinners by calling $('.numeric-stepper').stepper(); in the success function of your ajax call.

$.ajax({
    // other ajax options ...

    success: function(res) {
        if (res) {
            $('.numeric-stepper').stepper();

        ...

edited Aug 10 '15 at 04:03

answered Aug 10 '15 at 03:57

Samuel Liew

68,352
105
140
225

After I added $('.numeric').stepper(); I got "Uncaught TypeError: $(...).stepper is not a function" error – Angela Chan Aug 10 '15 at 04:07
Find out I need to call initNumericStepper( ) which is in *numberstepper.js* to reload it. – Angela Chan Aug 10 '15 at 13:35
Sorry for the confusion. But your answer lead me to think about to reload function. Thanks all your help. – Angela Chan Aug 11 '15 at 18:31

How to get dynamically loaded elements to initialize after an ajax call?

1 Answers1