title: Event Delegation on selector that's returned from an ajax response
body: <p>The summary of this question is: if we're using Event Delegation does it always have to be bound to an element that exists in the DOM on page load? Can we bind to a selector returned in an ajax response?</p>
  <p>I'm using jQuery 3.2.1 and have been reading about Event Delegation: <a href="http://learn.jquery.com/events/event-delegation/" rel="nofollow noreferrer">http://learn.jquery.com/events/event-delegation/</a></p>
  <p>Using their example markup:</p>
  <pre><code>&lt;ul id=&quot;list&quot;&gt;
      &lt;li&gt;&lt;a href=&quot;http://domain1.com&quot;&gt;Item #1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;/local/path/1&quot;&gt;Item #2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;/local/path/2&quot;&gt;Item #3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;http://domain4.com&quot;&gt;Item #4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>I understand the point they're making about how if we added a 5th item to <code>#list</code> with js, the following would only work for Items 1 - 4 because the 5th item didn't exist when <code>.on</code> was called and therefore doesn't get the event handler:</p>
  <pre><code>$( &quot;#list a&quot; ).on( &quot;click&quot;, function( event ) {
  });
  </code></pre>
  <p>So the solution given is use a delegated event handler like this:</p>
  <pre><code>$( &quot;#list&quot; ).on( &quot;click&quot;, &quot;a&quot;, function( event ) {
  });
  </code></pre>
  <p>In both of these cases they have targeted <code>#list</code> because that's there on page load.</p>
  <p>In my application, I am making an ajax request which would return the equivalent of the entire block of markup given at the start (i.e. everything including <code>#list</code>) and appending it to a Bootstrap 3.3.7 modal window with an ID, <code>#notifierModal</code> inside the default area for content which has a class of <code>.modal-body</code>:</p>
  <pre><code>$.ajax({
      url: $(this).attr('href'),
      method: 'get'
  }).done(function(response) {
      $('.modal-body').html(response);
      $('#notifierModal').modal('show');
  }); 
  </code></pre>
  <p>I have this present on page load:</p>
  <pre><code>$( &quot;#list&quot; ).on( &quot;click&quot;, &quot;a&quot;, function( event ) {
      console.log('something inside #list was clicked');
  });
  </code></pre>
  <p>This <strong>does not</strong> work - presumably because <code>#list</code> is not there on page load since it's appended to <code>.modal-body</code> after the ajax request completes.</p>
  <p>This <strong>does</strong> work - presumably because <code>.modal-body</code> is present on page load:</p>
  <pre><code>$( &quot;.modal-body&quot; ).on( &quot;click&quot;, &quot;a&quot;, function( event ) {
      console.log('something inside .modal-body was clicked');
  });
  </code></pre>
  <p>So my question is two-fold:</p>
  <ol>
  <li><p>If we're using Event Delegation does it always have to be bound to an element that exists in the DOM on page load? Is it possible to target a selector that's returned in an ajax response?</p>
  </li>
  <li><p>The reason this is a problem in my application is because I have other anchor tags inside <code>.modal-body</code> which I don't want to be handled by the <code>click</code> event given in my js. It seems impossible to target anchors inside <code>#list</code> in this way? How could I write the js such that it only targets anchors inside <code>#list</code>?</p>
  </li>
  </ol>
  <p>PS - I've read <a href="https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements">Event binding on dynamically created elements?</a> but this seems to address binding on an element that existed on page load.</p>