javascript - Jquery 单击函数未在动态数据上调用

Question

我已经解决了现有的问题，但找不到解决问题的方法，所以这里...

我正在尝试在模态中实现轮播，但是当我激活模态时，不会调用单击函数。 HTML 是动态生成的，所以我认为我的问题是如何合并 javascript。

我应该提到这就是我正在尝试实现的:http://www.bootply.com/alcaraz/QxGeDFsS8G#

这是我正在动态加载的 HTML

<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> 

这是我的 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");
}

最后，这是动态内容加载到的静态 HTML。

<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

当动态元素添加到 DOM 时，您需要传播事件:

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

事件委托(delegate)基本上是将事件附加到父容器(为了示例，我使用了 body，但您可能希望使用更接近的父容器以使其性能更高)。该父级将拥有该事件，并且它会知道何时向其添加新的子级，并将该事件委托(delegate)给该给定的子级。