How do I make jquery events work in a bootstrap modal with dynamic content and selectors?

Question

I've spent a lot of time on this and browsed through reams of SO posts without success. I know I'm missing something obvious. I'm not experienced with javascript or jquery, so please answer in detail.

My goal is to open a modal and populate it with the first of a dozen sets of elements and use dynamically added pagination (markup and unique ids) to navigate through the sets. I can make this work if I'm not using a modal but I need a modal type of popover for this project.

I open the modal using a plugin that makes it easy to load ajax content:

<p><span class="smr-popup">click for popup test</span></p>

<script src="/js/eModal.min.js"></script>

<script>
$(document).ready(function () {
 $(".smr-popup").click(smrPopup);
  function smrPopup() {
    eModal.ajax({
        size: 'lg',
        url: "page1.html",
        buttons: [
            { text: "Close", close: true, style: "danger" }
        ]
    }, "Title");
   }
 });
</script>

The modal container at the bottom of the source page:

<div class="modal fade" tabindex="-1" style="display: none;" aria-hidden="true">
 <div class="modal-dialog modal-lg">
  <div class="modal-content">
   <div class="modal-header">
     <button type="button" class="x close" data-dismiss="modal">
       <span aria-hidden="true">×</span>
       <span class="sr-only">Close</span>
      </button>
      <h4 class="modal-title">Ajax modal <small></small></h4>
   </div>
  </div>
 </div>
</div>

When the modal is populated I dynamically add pagination using unique ids. The problem is when I click on one of these absolutely nothing happens, the click is ignored by jquery.

<p>..... modal content loaded via ajax .....</p>

<span id="page2">goto page 2</span>
<span id="page3">goto page 3</span>

<script>
  $(document).ready(function() {
   $('#page2').on("click", function() { 
    $.get("page2.html");
   });
   $('#page3').on("click", function() { 
    $.get("page3.html");
   });
  });
</script>

I need to repopulate the modal with new ajax content using dynamically generated selectors and I'm going nuts trying to figure out how to get jquery to recognize the new ids. Hopefully I've been clear enough that this makes sense to someone. Thanks in advance for any help!

Answer 1

The second argument to jQuery's on() function is the target selector. Those click events will have to be placed on the dynamic elements parent (the p tag according to your code) and then you'll have to have the id selector argument be the second argument.

Answer 2

when you do:

$('#page2').on("click"...

This will not find any element because it isn´t already attatch to document.

eModal.ajax can get 3 arguments or 1 object,

eModal.ajax("url",'title', function($templateAjax){
   $templateAjax.find("#page2").on('click', handler);
});

or by object

 eModal.ajax({
          url:"url",
          title:'title', 
          callback: function($templateAjax){
            $templateAjax.find("#page2").on('click', handler);
       }
   });

Note: please make sure you are using V1.0.2 or higher of eModal.js