Question

我开发了一个类似于Soundcloud的音频平台，它完美地工作（编辑）！直到我决定创建 Ajax 滚动分页。

分页和 Ajax 都可以正常工作。但是，我注意到一些 JavaScript 在实施 Ajax 之前曾经工作过，而不再这样做了。

该剧本的职责非常简单;当用户点击播放按钮时播放曲目（或在用户再次点击播放按钮时暂停）。然后，一旦完成轨道，继续前进到下一个轨道，直到它最终到达终点。

现在发生的事情是，当页面首次加载时（以及加载页面的10个曲目），script将按预期工作。但是，当用户向下滚动以获得更多结果加载时，如果用户点击其中一个新加载的曲目播放按钮，该曲目将无法播放，或者它将播放应该暂停的其他曲目（然后所有按钮完全停止工作）。

以下是feed.js的全部（删除尽可能多的膨胀代码，并发表评论）：

$(document).ready(function(){ // on page load
    var tp = 1; // set track page equal to one
    loadTracks(tp); // then load all of the tracks

    jQuery(function($) {
        $('.f-outer-container').on('scroll', function() { // when the user scrolls to the bottom of the page load more tracks
            if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
                tp++; 
                loadTracks(tp);
            }
        });
    });
    function loadTracks(track_page){
        $.post('/spectrum-rr/core/_func/functions/loadTrack.php', {'page': tp}, function(data){ // get send and get data from loadTrack.php
            $("#f-ap__aj").append(data); // append those tracks in the feed

            // player functions
            $(".track-w__trigger").click(function(){ // when the play button is clicked
                var tid = $(this).attr('aria-trackid'), // get its track id
                    tiW = 'w' + tid + 'w',
                    tiW = eval(tiW); // set the waveform object

                playPauseButton(this, tiW, tid); 
            });
        });
    }
});

// player functionality
function playPauseButton(button, wave, trackID){ // once the function has been called
    pausePrevious(button); // pause the previous track (this doesn't work when more ajax results are loaded)
    var button = $(button);

    if(wave.isPlaying()){ // if the wave is playing; stop it
        button.removeClass("playing");
        wave.pause();
    } else { // vice versa
        button.addClass("playing"); 
        wave.play();
    }
    var waveDuration = wave.getDuration();
    var nextTrack = ++trackID; 

    var checkAudioFinished = setInterval(function(){ // check if the audio has finished playing every second
        if(wave.getCurrentTime() >= waveDuration){ // if it has
            button.removeClass("playing"); // remove it's buttons "playing" class
            $('#w' + nextTrack + 'w-trigger').trigger('click'); // play the next song on the playlist by incrementing the id
            clearInterval(checkAudioFinished);
        }    
    }, 1000);
}
function pausePrevious(b){
    $(".playing").not(b).each(function(){ // when this function is triggered
        $(".playing").trigger('click'); // pause all of the other tracks (by simulating the click of their pause buttons
        $(".playing").removeClass("playing"); // remove it's class too
    });
}

由于$(document).ready();的使用，我觉得这些问题正在发生。强制这些功能仅对已加载的轨道可用。但是，我不确定。

以下是从每个请求发回的 HTML （10秒内）：

<div class="f-wave-send f-waveform-container">
    <div aria-trackid="1" class="track-w__trigger" id="w1w-trigger"></div> <!-- the "1" is generated by PHP. it is incremented for every div !-->
    <div class="f-waveform-outer-container">
        <div aria-trackid="1" class="track-w__waveform" id="w1-w"></div>
        <script>
            var w1w = WaveSurfer.create({ // wavesurfer script (this is the "wave" object that is being triggered inside the playPauseButton() function !-->
                container: '#w1-w',
                barWidth: 2,
            });
            w1w.load('./player/audio/sampleaudio.mp3');             
        </script>
    </div>
</div>

如果有人能够让我了解可能发生的事情（或者有关改进我的代码的任何提示），我们将不胜感激！

Answer 1

试试这个，

每次发生加载时都不应绑定点击事件，并且应该将其移出loadTracks，而不是应用事件委派。

           // player functions
            $(document).on('click', '.track-w__trigger', function(){ // when the play button is clicked
                var tid = $(this).attr('aria-trackid'), // get its track id
                    tiW = 'w' + tid + 'w',
                    tiW = eval(tiW); // set the waveform object

                playPauseButton(this, tiW, tid); 
            });

Answer 2

将您的代码更改为此

$(document).ready(function(){ // on page load
var tp = 1; // set track page equal to one
loadTracks(tp); // then load all of the tracks

jQuery(function($) {
    $('.f-outer-container').on('scroll', function() { // when the user scrolls to the bottom of the page load more tracks
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            tp++; 
            loadTracks(tp);
        }
    });
});
function loadTracks(track_page){
    $.post('/spectrum-rr/core/_func/functions/loadTrack.php', {'page': tp}, function(data){ // get send and get data from loadTrack.php
        $("#f-ap__aj").append(data); // append those tracks in the feed
    });
}

// player functions
        $(".track-w__trigger").on("click",function(){ // when the play button is clicked
            var tid = $(this).attr('aria-trackid'); // get its track id
                tiW = 'w' + tid + 'w';
                tiW = eval(tiW); // set the waveform object

            playPauseButton(this, tiW, tid); 
        });

});

移出$（＆＃34; .track-w__trigger＆＃34;）。点击外部$ .post并将其更改为$（＆＃34; .track-w__trigger＆＃34;）。on（＆＃34 ;点击＆＃34;，函数（）

实现ajax滚动分页后，触发器功能不再起作用

2 个答案: