Question

I have a master page that loads content into a div based on which link is clicked. I do this by using jQuery to add a click handler for certain anchors:

<div id="nav">
  <a href="somepage.html">
  ...
</div>

<div id="content"/>

<script type="text/javascript">
  $(document).ready(function() {
    $('#nav a, #footer a').click(function(e) {
      $('#content').load($(this).attr('href'));
      return false;
    });
  });
</script>

Some of the pages that get loaded into #content also have anchors for which I want to add a click handler (so the result of those clicks also go into #content). I’ve tried this:

$('#content a').click(function(e) {
  ...
});

but that doesn’t appear to work. Any ideas how I can set the click handler on anchors in those loaded pages?

Answer 1

$(document).on('click', '#content a', function(e) {
  ...
});

Should work. When you add elements dynaically you need to use on() to bind them to an event. From the docs:

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to
.on(). To ensure the elements are present and can be selected, perform
event binding inside a document ready handler for elements that are in
the HTML markup on the page. If new HTML is being injected into the
page, select the elements and attach event handlers after the new HTML
is placed into the page.

Ideally you’d want a parent element closer in the DOM than document.