javascript - jQuery/javascript 当页面中出现 css 类时如何加载脚本

Question

我有一个页面显示行列表并带有分页，当您单击下一页时，下一页会在同一页面中加载，其中包含另一个行列表。所以基本上下一页会加载一堆其他行，而不会重新加载我的确切页面

所以我的问题是我使用下面的这个脚本，虽然它工作正常，但是当下一页加载到同一窗口中时，这个脚本对他们不起作用。 我希望我在这里说得通:)对此有什么好的解决方案吗？

$('.ltwitch').each(function () {
    var tnick = $(this).data('tnick');
    var span = $(this).next();
    $.getJSON("https://api.twitch.tv/kraken/streams/" + tnick + ".json?callback=?", function (data) {
        if (data.stream === null) {
            span.html( 
                '<strong class="ipsOnlineStatus ipsOnlineStatus_offline"><i class="fa fa-circle"></i></strong><h4 class="ipsDataItem_title ipsType_break"> ' + tnick + ' </h4><div class="ipsDataItem_meta">Offline</div>');
        } else { 
            var views = data.stream.viewers;
            var game = data.stream.game;
            span.html(
                '<strong class="ipsOnlineStatus ipsOnlineStatus_online"><i class="fa fa-circle"></i></strong><h4 class="ipsDataItem_title ipsType_break"> ' + tnick + ' </h4><div class="ipsDataItem_meta"> ' + views + ' viewers </div><div class="ipsDataItem_meta">Playing: '+ game +' </div>');
        }
        $(function() {
            var online = $('.ipsOnlineStatus_online').closest('.cCmsRecord_row');
            var first = $('.cCmsRecord_row')[0];
            online.each(function() {
            $(first).before(this);
            });
        });

缺少 HTML

<ol class="List">

    <li class="row">
        <div class="main">
            <a href="#" class="ease">
                <div class="ltwitch" data-tnick="esl_lol"></div>
            </a>
        </div>
    </li>
        <li class="row">
        <div class="main">
            <a href="#" class="ease">
                <div class="ltwitch" data-tnick="esl_lol"></div>
            </a>
        </div>
    </li>
    ....
    ....
    ....

</ol>

<div data-role="tablePagination">
    <ul class="ipsPagination">  
        <li class="ipsPagination_prev ipsPagination_inactive"><a href="#">Prev</a></li>     
        <li class="ipsPagination_next"><a href="#">Next</a></li>
    </ul>
</div>

Answer 1

听起来您想将您的工作包装在一个命名函数中，以便您可以在后续分页中调用它。您现在的代码很可能在准备好的文档中，仅在初始页面加载时调用。现在，将所有这些工作转变成一个函数，可以多次调用它。

function myFunction () {
...
};


myFunction();

然后在设置分页代码的位置(我认为是 anchor 单击绑定(bind))只需再次调用 myFunction() 即可。

$('.ipsPagination_next').click(function(){
  ...
  myFunction();
});

我要指出的是，如果这两个区域位于不同的文档就绪函数或不同的文件中，那么范围和封装等想法可能会出现问题。我们必须查看更多代码才能确认这是否会成为问题。如果您遇到问题，您可以将函数 myFunction() 放在根目录上，该根目录位于任何准备好的、加载的文档或您可能正在使用的任何文档之外。那么它将位于根级别或窗口级别。

window.myFunction = function () {
   ...each(... your current work
};

如果您不确定封装或范围如何工作，可以使用此方法。