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

Question

我开发了一个类似于 Soundcloud 的音频平台，并且一切都完美运行!直到我决定创建一个 Ajax 滚动分页。

分页和Ajax都工作得很好。但是，我注意到一些 JavaScript 在实现 Ajax 之前曾经可以工作，但现在不再工作了。

该脚本的职责非常简单；当用户单击播放按钮时播放轨道(或当用户再次单击它时暂停)。然后，一旦轨道结束，就转到下一首轨道，直到最终到达结尾。

现在发生的情况是，当页面首次加载时(以及随页面加载的 10 个轨道)，脚本 将按预期工作。但是，当用户向下滚动以获取更多要加载的结果时，如果用户单击新加载的轨道之一播放按钮，则该轨道要么不会播放，要么会在应该暂停的另一首轨道上播放(然后所有按钮就完全停止工作)。

这里是 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

试试这个，

您不应该在每次加载时都绑定(bind)一个点击事件，并且应该将其移出您的 loadTracks，而是应该应用事件委托(delegate)。

           // 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); 
            });