Jquery click function not being called on dynamic data

Question

I've gone through the existing questions and can't find a solution to my problem, so here goes...

I am trying to implement a carousel inside of a modal, but the click function is not being called when I activate the modal. The HTML is generated dynamically, so I'm think my problem is how I'm incorporating the javascript.

I should mention this is what I'm trying to implement: http://www.bootply.com/alcaraz/QxGeDFsS8G#

Here is my my HTML that is being loaded dynamically

<div class="container" id="photography">
<div class="row">
    <div class="col-lg-3 col-md-3 col-sm-3">
        <a data-toggle="modal" data-target="#modal-gallery" href="#">
            <img src="img/img1.jpg" class="thumbnail img-responsive" id="image-1">
        </a>
        </br>
        <a data-toggle="modal" data-target="#modal-gallery" href="#">
            <img src="img/img1.jpg" class="thumbnail img-responsive">
        </a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3">
        <a data-toggle="modal" data-target="#modal-gallery" href="#">
            <img src="img/img1.jpg" class=" thumbnail img-responsive" id="image-2">
        </a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3">
        <a data-toggle="modal" data-target="#modal-gallery" href="#">
            <img src="img/img1.jpg" class="thumbnail img-responsive" id="image-3">
        </a>
    </div>
</div><!--Row-->

<div class="hidden" id="image-repo">
<!-- #image-1 -->
    <div class="item" id="image-1">
        <img class="thumbnail img-responsive" title="Image 11" src="img/img1.jpg">
    </div>
    <div class="item" id="image-1">
        <img class="thumbnail img-responsive" title="Image 12" src="img/img1.jpg">
    </div>
    <div class="item" id="image-1">
        <img class="thumbnail img-responsive" title="Image 13" src="img/img1.jpg">
    </div>

    <!-- #image-2 -->
    <div class="item" id="image-2">
        <img class="thumbnail img-responsive" title="Image 21" src="http://dummyimage.com/600x350/2255EE/969696">
    </div>
    <div class="item" id="image-2">
        <img class="thumbnail img-responsive" title="Image 21" src="http://dummyimage.com/600x600/2255EE/969696">
    </div>
    <div class="item" id="image-2">
        <img class="thumbnail img-responsive" title="Image 23" src="http://dummyimage.com/300x300/2255EE/969696">
    </div>   

    <!-- #image-3-->
    <div class="item" id="image-3">
        <img class="thumbnail img-responsive" title="Image 31" src="http://dummyimage.com/600x350/449955/FFF">
    </div>
    <div class="item" id="image-3">
        <img class="thumbnail img-responsive" title="Image 32" src="http://dummyimage.com/600x600/449955/FFF">
    </div>
    <div class="item" id="image-3">
        <img class="thumbnail img-responsive" title="Image 33" src="http://dummyimage.com/300x300/449955/FFF">
    </div> 

And here is my Javascript

$("document").ready(function(){
 $('.stop-this-link').on('click', false);
 $("#About").on("click", clickAbout);
 $("#Projects").on("click", clickProjects);
 $("#Photography").on("click", clickPhotography);
 $("#Film").on("click", clickFilm);
 $("#Resume").on("click", clickResume);
 $("#Contact").on("click", clickContact);

});


function clickAbout(evt){
 $("#portfolio").load("aboutMe.html");
}

function clickProjects(evt){
 $("#portfolio").html("Clicked Projects");
}


function clickResume(evt){
 $("#portfolio").html("Clicked Resume");
}


function clickPhotography(evt){
 $("#portfolio").load("photography.html");
         /* activate the carousel */
 $("#modal-carousel").carousel({interval:false});

 /* change modal title when slide changes */
 $("#modal-carousel").on("slid.bs.carousel", function () {
   $(".modal-title").html($(this).find(".active img").attr("title"));
 })

/* when clicking a thumbnail */
//$(".portfolio .photography").on('click', ".row .thumbnail", function(event){
 //$(document.body).on('click', '.row .thumbnail', function(event){
 $(".row .thumbnail").click(function(){
     var content = $(".carousel-inner");
     var title = $(".modal-title");

     content.empty();  
     title.empty();

     var id = this.id;  
     var repo = $("#img-repo .item");
     var repoCopy = repo.filter("#" + id).clone();
     var active = repoCopy.first();

     active.addClass("active");
     title.html(active.find("img").attr("title"));
     content.append(repoCopy);

     // show the modal
     //$("#modal-gallery").modal("show");
 });

}

function clickFilm(evt){
 $("#portfolio").load("film.html");
}

function clickContact(evt){
 $("#portfolio").load("contact.php");
}

Finally, here is the static HTML that the dynamic content is loaded into.

<div class="col-md-9 col-lg-9 col-xs-9 col-sm-9" id="portfolio"></div> <!--Portfolio!-->
 <div id="modal-gallery" class="modal fade" role="dialog">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <h3 class="modal-title"></h3>
             </div><!--Modal Header-->
             <div class="modal-body">
                 <div id="modal-carousel" class="carousel">
                     <div class="carousel-inner">

                     </div><!--Carousel-Inner-->
                     <a class="carousel-control-left" href="#modal-carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                     <a class="carousel-control-right" href="#modal-carousel" data-slide"prev"><i class="glyphicon glyphicon-chevron-right"></i></a>
                 </div><!--Carousel-->
             </div><!--Modal Body-->
             <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
             </div><!--Footer-->
         </div><!--modal content-->
     </div><!--Modal Dialog-->
 </div><!--modal-gallery-->

Answer 1

You need to use event delegation for this. You are binding events on page load (inside your document ready function), but the elements don't exist in the page yet. You should do something like this:

$('body').on('click', '#About', clickAbout);

This will listen for click events on the body tag and then see if they match the provided selector. Read more about event delegation here: http://api.jquery.com/on/

A more efficient way to accomplish this in your particular use case would be to set the onclick attribute of the elements that you are adding dynamically. For example:

<div id="About" onclick="clickAbout">

Also, you have some issues with your HTML. You cannot assign the same ID to multiple elements as you have. You have three divs with the id "image-1", for example. IDs must be unique and only one element with a given ID should exist within the page. Otherwise, you'll run into all sorts of problems.

Answer 2

You need to propagate the event when dynamic elements are added to the DOM:

$("body").on("click", '#About', clickAbout);

Event delegation is basically attaching the event to a parent container (for the sake of the example i've used body, but you might want to use a closer parent in order to make it more performant). This parent will have the event and it will know when a new child is added to it, and delegate the event to that given child.