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

Question

I have a section in my app where user provide twitter account via input, now I want to display the profile on input change.我的应用程序中有一个部分，用户通过输入提供 twitter 帐户，现在我想在输入更改时显示配置文件。

Here is Twitter docs on how to display embedded Twitter profile, https://developer.twitter.com/en/docs/twitter-for-websites/timelines/overview Here is Twitter docs on how to display embedded Twitter profile, https://developer.twitter.com/en/docs/twitter-for-websites/timelines/overview

Here is my live demo on jsfiddle:这是我在 jsfiddle 上的现场演示：

live demo现场演示

Here is my solution: HTML这是我的解决方案：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>

Here is js这里是js

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

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

    setTimeout(function() {

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

Now when the user provides the profile URL, the profile is not displayed现在当用户提供配置文件 URL 时，配置文件不显示

What do I need to do to solve this problem?我需要做什么来解决这个问题？

Answer 1

Honestly I'm not an expert in JQuery, but I made it work.老实说，我不是 JQuery 方面的专家，但我做到了。 I found that for updating DOM you should use event delegetion.我发现要更新 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 配置文件

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-07-22 17:35:05

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-07-22 17:35:05

解决方案1
1 已采纳 2020-07-22 17:35:05