In jQuery, how can I replace the body of my document and still get JavaScript to fire?

Question

Currently, my page has a top navigation bar.

When clicking, the page currently does a full reload which causes a flickering effect.

To avoid this, I'm planning to use the jQuery html function to just replace the main body of the page and leave the header intact.

But this appears to stop JavaScript function from running on the main body of the page.

Is there a way I can use the jQuery html function and still get my JavaScript to work on the HTML elements in the body?

I disagree with the downvotes, the question is asked clearly and looks legit to me. — Kos, Jul 04 '18 at 11:49
angularjs views work the same way what you require. bt you have to use angularjs — Nitin Sawant, Jul 04 '18 at 11:49
what you have done to replace the main body of the page? which JavaScript function is stopping? — Nitin Sawant, Jul 04 '18 at 11:51
@Kos I downvoted. Because there is no attempt at trying it, it's hard to debug and help when you can't see code, otherwise the answer could just be a reiteration of what's already been tried. There is no clear indication as what's broken other than `to stop Javascript function from running` — treyBake, Jul 04 '18 at 11:56
@Kos I don't think it's clear at all. It's far too vague. "Is there a way I can use the jQuery html function and still get my JavaScript to work on the HTML elements in the body?" Yes. So what exactly isn't working? — Matt Lishman, Jul 04 '18 at 12:08

score 2 · Accepted Answer · answered Jul 04 '18 at 11:52

You can use event bubbling to listen to the events on document, and based on the target element, execute appropriate event handling logic.

jQuery makes it easier to register such event handlers by simplifying the logic around identification of the target element. The syntax for registering such an event handler would be: $(document).on(events, selector, handler).

These are called Delegated Event Handlers in jQuery's documentation:

Delegated event handlers have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.

I have illustrated an example in the snippet below. Notice how you do not need to re-register the event listener even after replacing the HTML content.

$(document).on("click", "#clickMe", function() {
  alert("Element clicked.");
});

// Change the innerHTML after 10 seconds.
setTimeout(function() {
  $(document.body).html(`
    <div id="clickMe">[New] Click Me</div>
  `);
}, 10000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="clickMe">Click me</div>

You can read more about event bubbling here and more about jQuery's event handling syntax here.

_{Note: In my opinion, you need to rethink your architecture. While the suggested approach works, given the unconventional nature of your architecture, you may run across other challenges in future.}

In jQuery, how can I replace the body of my document and still get JavaScript to fire?

1 Answers1