0

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 调用加载新内容时

 $(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 调用生成的新内容。任何人的想法？

4

2 回答 2

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。

于 2013-01-20T17:46:40.397 回答
0

更换时会发生什么：

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

和

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

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

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

于 2013-01-20T12:19:40.407 回答