Question

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

我正在尝试在模态中实现轮播，但是当我激活模态时，没有调用click函数。 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);

事件委托基本上是将事件附加到父容器（为了示例我已经使用了主体，但您可能希望使用更近的父级以使其更高效）。此父级将拥有该事件，并且它将知道何时向其添加新子级，并将该事件委派给该给定子级。

Answer 2

您需要为此使用事件委派。您正在页面加载上绑定事件（在文档就绪函数内），但页面中尚不存在这些元素。你应该这样做：

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

这将侦听body标记上的点击事件，然后查看它们是否与提供的选择器匹配。在此处阅读有关活动授权的更多信息：http://api.jquery.com/on/

在特定用例中实现此目的的更有效方法是设置要动态添加的元素的onclick属性。例如：

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

此外，您的HTML存在一些问题。您无法为多个元素分配相同的ID。例如，您有三个id为“image-1”的div。 ID必须是唯一的，并且页面中只应存在一个具有给定ID的元素。否则，你会遇到各种各样的问题。

没有在动态数据上调用Jquery单击函数

2 个答案: