How to make jquery events in modal bootstrap with dynamic content and selectors?
I spent a lot of time on this and looked at posts from SO posts with no success. I know I am missing something obvious. I am not familiar 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 stencils and use the dynamically added pagination (markup and unique IDs) to navigate the sets. I can make this work if I am not using a modal, but I need a modal popover type for this project.
I open the modal version with a plugin that makes it easy to load the 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>
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 group fills up, I dynamically add pagination using unique IDs. The problem is when I click on one of them 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 overwrite modal new ajax content using dynamically generated selectors and I'm going to be using nuts when trying to figure out how to get jquery to recognize new ids. Hope I was clear enough to make sense to someone. Thanks in advance for your help!
source to share
when you do:
$('#page2').on("click"...
This won't find any element because it is not already attached to the document.
eModal.ajax can receive 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: make sure you are using V1.0.2 or higher eModal.js
source to share