Question

Here’s a condensed example.

Keep in mind that the .chat-reply class has a click event handler bound to it.

The HTML (Reply Button):

<div class="container">
    <a href="#" class="btn small chat-reply">Reply</a>
</div>

This jQuery function is called when someone clicks another button that sends a message to the server to be saved in the database. This is done via ajax and is done successfully. In the aforementioned .ajax() success() callback this function is called:

$.ajax({
      type      :  'GET',
      url       :  '/some_controller/some_method',
      success   :  function(data) {

      $('.container').replaceWith(data);
    }
});

The ‘data’ in the success callback above will replace the entire .container div including the child .chat-reply button. After this replaceWith(), the click event is no longer bound to the button.

Logically, I’m attempting to have the end user post a message to a timeline, then have that message display in the timeline without needing to refresh the screen.

Answer 1

Decided on a rather not-so-elegant solution thanks in part to this post: Events not registering after replaceWith

I created a function called wireUpChatReply() that binds a click event to the .chat-reply button.

Then after the replaceWith(), I make a call to wireUpChatReply() to rebind the events. I make this same call to wireUpChatReply on document.ready.

It’s not pretty but it works.