jquery - 从ajax加载的html加载twitter小部件？

Question

我正在尝试使用直接来自 Twitter 网站的非常标准的 Twitter 搜索小部件:

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: '$AAPL',
  interval: 6000,
  title: 'AAPL',
  subject: '',
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#8ec1da',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#444444',
      links: '#1985b5'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    toptweets: true,
    behavior: 'default'
  }
}).render().start();
</script>

它的加载方式如下:

$(".linktosymbol").bind("ajax:success", function(event, data, status, xhr) {
    $(".symboldetails").html("");
    var target = $("#" + $(this).attr('data-target'));
    target.html(data);
});

但它从未出现，它似乎只是使屏幕空白并永远继续加载。有想法吗？

Answer 1

有同样的问题。问题在于 Twitter JS 使用 document.write 创建标记，该标记仅在生成文档时起作用。否则它将创建一个新文档。

提示:调试时，使用 http://twitter.com/javascripts/widgets/widget.js 中的原始代码会更容易。

<div id="twtr-widget"></div>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 500,
  height: 300,
  id: 'twtr-widget',
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('Znarkus').start();
</script>

这就是我的解决方案。添加 id 参数，Twitter 会将标记添加到具有该 id 的元素(这就是顶部 div 的用途)。

注意:我在使用他们的脚本的缩小版本时遇到了问题，因此我使用了http://twitter.com/javascripts/widgets/widget.js。