javascript functions stop working after ajax

Question

My code is below:

<div id="action-buttons" class="container">
     <button type="button" name="MyButton" id="closeButton">close RMA</button>
</div>
<div>
<button type="button" id="refreshButtons">refresh Buttons</button>
</div>

<script type="text/javascript">
            $(document).ready(function () {

                $("#refreshButtons").on('click', function () {
                    $.ajax({
                        url: "/renderButtons.html",
                        error: function () {
                            alert('Error message');
                        },
                        success: function (HtmlResult) {
                            $("#action-buttons").html(HtmlResult);
                        },
                        complete: function() {
                            alert('Action buttons - loaded successfully');
                        }

                    });

                });


                $("#closeButton").on('click', function () {
                    alert('some text');
                });



            });
    </script>

When i click on #closeButton I see the Alert. That's correct.

But when I load the div#action-buttons content (by clicking #refreshButtons) my alert doesn't show. Why?

Why there is no message in browser console?.

"/renderButtons.html" is simply html file:

<button type="button" name="MyButton" id="closeButton">close RMA</button>

your alert will apear on click on #closeButton not #refreshButtons — Hasan Daghash, Dec 27 '15 at 12:59
Why you're replacing the button at all if its the same markup again? — Andreas, Dec 27 '15 at 13:00
@Andreas: This is only the example of my problem, real code is too huge to paste here. — macx, Dec 27 '15 at 13:12

score 4 · Answer 1 · answered Dec 27 '15 at 13:00

The buttons stop triggering the event handler because they're not hooked up to it (anymore).

Your

$("#action-buttons").html(HtmlResult);

line completely destroys the elements inside the #action-buttons element and replaces them with new elements. Those new elements are not hooked up to your event handler, the old one were.

You can solve this in two ways:

Hook them up again
Use event delegation

Event delegation is probably want you want here. You hook the event on a container that won't be changed (#action-buttons, for instance), but tell jQuery not to call your handler unless the event passed through an element matching a selector you give it:

$("#action-buttons").on('click', "#closeButton", function () {
    alert('some text');
});

More in the on documentation.

Live Example:

$(document).ready(function() {

  var counter = 0;
  $("#refreshButtons").on('click', function() {
    // Simulating the ajax here
    setTimeout(function() {
        ++counter;
        $("#action-buttons").html(
          '<button type="button" name="MyButton" id="closeButton">close RMA #' + counter + '</button>'
        );
    }, 10);
  });


  $("#action-buttons").on('click', "#closeButton", function() {
    alert('some text');
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="action-buttons" class="container">
  <button type="button" name="MyButton" id="closeButton">close RMA</button>
</div>
<div>
  <button type="button" id="refreshButtons">refresh Buttons</button>
</div>

score 1 · Answer 2 · answered Dec 27 '15 at 13:01

After Ajax response; your existing button is getting removed and newer button is getting inserted in DOM. So whatever events you had bounded to your older button gets automatically removed from context. So deal with such situation you need to use jquery's event delegation technique while attaching event as follows:

$(document).on('click',"#closeButton", function () {
    alert('some text');
});

In above case; event first gets attached and listen by document and then it gets delegated to button with an id "#closeButton" if that is present in DOM. I hope I have cleared your doubt.

javascript functions stop working after ajax

2 Answers2