javascript 创建的 html 不起作用 -- 滑块不滑动

Question

我正在学习 Javascript 和 jQuery，所以我遇到了一些麻烦。我正在使用 [fullPage.js][2] [制作单页网站][1]，我通过 JSON 从 WordPress 获取网站数据。最后我想用 cordova 编译这个 signle 页面站点来制作一个移动应用程序。

问题：

FullPage.js 带有 right/left 滑块，我想用它们来显示单页网站每个部分中的内容。但是，当我尝试使用 javascript 和 JSON 从 post 的循环中创建幻灯片 <div class="slide"> 时，我无法将幻灯片呈现为幻灯片。我得到的只是一堆附有 class "slide" 的 div，它们什么都不做。

这是一个示例，它获取的推文已转换为 WordPress post 并且我希望每条推文都成为幻灯片，因此您可以滑动浏览最近的推文。如何获取在 javascript 循环中创建的幻灯片 div：

     <!-- TWITTER POST JSON -->
         <script type="text/javascript">
          var tweeturl = "http://ngaio.dogpatchmedia.com/api/get_posts/?posts_per_page=10&post_type=tweet";

                $.ajax({

                    type: 'GET',
                    url: tweeturl,
                    complete: function(){                    
                    },
                    success: function (data) {

                        var response = data; //JSON.parse(data);

                        //loop through posts
                        for(var i = 0; i != response.posts.length; i++) {

                        //get each element in the array
                        var post = response.posts[i];

                        // post vars
                        var tweetContent = post.content;

                        // output stuff so we can see things
                        $("#twitter").append('<div class="slide"><div class="large-12 small-12 columns testimonial"><div class="twitterQuote"><p>' + tweetContent + '</p></div><div class="twitter"><div class="photo"><img src="img/twitterLogo.png"> </div></div></div></div>').trigger('create');

                        }


                    },
                    error:function (xhr, ajaxOptions, thrownError) {                    
                        alert("Error");

                    }

                });
      </script>

  <!-- TWITTER (SLIDER) -->

     <div class="section"><div class="row" id="twitter"></div></div>

备注：

You can see the full site here

FullPage.Js docs can be found here

Answer 1

您正在初始化 fullpage.js，然后再添加幻灯片。 Javascript 是异步的，你需要小心。

您应该在 ajax 调用的 success 语句中添加 fullpage.js 的初始化。在您使用 javascript 添加幻灯片之后。

javascript 创建的 html 不起作用 -- 滑块不滑动

html created by javascript doesnt work -- sliders dont slide

html

javascript

wordpress

jquery

fullpage.js