Question

我正在使用jsnewsticker插件（http://jsfiddle.net/stevenchu/ezEtK/），它使用<li>一次显示一个项目。

如果我的<li>项硬编码到HTML中，则下面的代码有效。但是，如果我必须从我的脚本执行的RSS源动态创建<li>项目

，它就不起作用

最终的HTML页面包含<li>项，但JS不会滚动它们。我在控制台中没有收到任何错误。 JS正在向我的<ul>附加自动收报机类。

这可能是一个顺序问题 - 也许JS脚本在<li>项列表完全呈现之前触发了？如果可能的话，我有没有办法测试这个理论？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/js/jsnewsticker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $.get('http://example.com/feed', function (data) {
        var count = 0;
        $(data).find("item").each(function () {
            var newsfeed = $(this);     
            var newstitle = newsfeed.find("title").text();
            var newslink = newsfeed.find("link").text();

            var newslist = '';
            if (count < 3) {
                newslist += '<li class="newsitem">'
                + '<a href="'
                + newslink
                + '">Latest: '
                + newstitle
                + '</a>'
                + '</li>';
                count++;
            }

            $(".latestnews").append(newslist);
        });

    });

    $('.ticker').Ticker();
});
</script>

从浏览器源获取的HTML：

<ul class="latestnews ticker ticker-active">
    <li class="newsitem"><a href="http://example.com">Example</a></li>
    <li class="newsitem"><a href="http://example.com">Example</a></li>
    <li class="newsitem"><a href="http://example.com">Example</a></li>
</ul>

Answer 1

您之前已回答了自己的问题。是的，您在async Ajax get调用完成之前调用了ticker，因此它会针对空列表激活ticker。

您需要在get内拨打电话。例如类似的东西：

<script src="/js/jsnewsticker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $.get('http://example.com/feed', function (data) {
        var count = 0;
        $(data).find("item").each(function () {
            var newsfeed = $(this);     
            var newstitle = newsfeed.find("title").text();
            var newslink = newsfeed.find("link").text();

            var newslist = '';
            if (count < 3) {
                newslist += '<li class="newsitem">'
                + '<a href="'
                + newslink
                + '">Latest: '
                + newstitle
                + '</a>'
                + '</li>';
                count++;
            }

            $(".latestnews").append(newslist);
        });
        $('.ticker').Ticker();
    });

});
</script>

jQuery自动收报机磁带脚本部分运行

1 个答案: