Question

在调用ajax之后我的灯箱出现问题

目前就像这样

$(".trackz").click(function () {
    $(".contentmusic").remove();

    $.ajax({
        url: "data/loadContent.php?clickedcontent=" + $(this).attr("id"),
        success: function (html) {
            if (html) {
                $("#lightbox-panel").append(html);
                $("#lightbox, #lightbox-panel").fadeIn(300);
            }
        }
    });
});

但是当我用这个ajax调用

加载newcontent时

 $(window).scroll(function () {
     if ($(window).scrollTop() == $(document).height() - $(window).height()) {

         var myStylesLocation = "css/demo.css";

         $.ajax({
             url: "data/loadMoreMusic.php?lastMusic=" + $(".trackz:last").attr("id"),
             success: function (html) {
                 if (html) {
                     $("#trackz").append(html);
                     $('.fdw-background').hover(
                         function () {
                             $(this).animate({
                                 opacity: '1'
                             });
                         },
                         function () {
                             $(this).animate({
                                 opacity: '0'
                             });
                         }
                     );
                 } else {
                     $('div#loadMoreMusic').replaceWith("<center>Finished loading Music</center>");
                 }
             }
         });
     }
 });

我的灯箱不再用于第二次ajax调用生成的新内容。有人有想法吗？

Answer 1

你（可能）试图在加载DOM时尝试触发一个尚不存在的元素。

使用此：

//another notation because we want to trigger on a DOM manipulation
$('.someClass').on("click", "#someId", function(event){
     //do something
});

其中.someClass是加载DOM时已经存在的类，以及其中#someId是您要点击的ID，但尚不存在。

Answer 2

更换时会发生什么：

$(".trackz").click(function () {

使用

$(".trackz").on('click', function () {

当您向DOM添加动态内容时，您无法利用其事件处理。 on()方法允许您访问元素上的事件处理程序，无论DOM是否已更改。

您还应该使用ajax()的新功能。成功功能应放在done()中（链接在同一jQuery对象上的方法）。

lightbox不适用于ajax调用后生成的新内容

2 个答案: