在输入更改时加载 Twitter 配置文件

Question

我的应用程序中有一个部分，用户可以在其中通过输入提供 Twitter 帐户，现在我想在输入更改时显示个人资料。

这是有关如何显示嵌入式 Twitter 个人资料的 Twitter 文档，https://developer.twitter.com/en/docs/twitter-for-websites/timelines/overview

这是我在 jsfiddle 上的现场演示：

这是我的解决方案：HTML

<html lang="en">
   <head>
      <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>    
   </head>
   <body>
      <div class="tw-containeritter">
         <a class="twitter-timeline" href="" data-tweet-limit="1"></a>
      </div>
      <input id="twitterurl" placeholder="provide the twitter url" />
   </body>
</html>

这是js

$("#twitterurl").on('change', function(e) {

    var twitterUrl = $(this).val();
    $(this).attr('href', twitterUrl);

    setTimeout(function() {

        console.log("setTimeout twitter");
        twttr.widgets.load();
    }, 2000);
})

现在当用户提供个人资料时URL，个人资料不显示

我需要做什么来解决这个问题？

Answer 1

老实说，我不是 JQuery 方面的专家，但我做到了。我发现要更新 DOM，您应该使用事件删除。 reference

<!DOCTYPE html>
<html lang="en">
   <head>
      <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>    
   </head>
   <body id="main">
      <div class="tw-containeritter"></div>
      <input id="twitterurl" placeholder="provide the twitter url" />
   </body>
</html>


$("#main").on('input', '#twitterurl', function(e) {
    var twitterUrl = $(this).val();
    $('.tw-containeritter').append("<a class='twitter-timeline' href='' data-tweet-limit='1'></a>");
    $('.twitter-timeline').attr('href', twitterUrl);
    $('#twitterurl').blur();

    setTimeout(function() {
        console.log("setTimeout twitter");
        twttr.widgets.load();
    }, 2000);
})

在输入更改时加载 Twitter 配置文件

load twitter profile on input change

html

javascript

twitter

jquery