javascript - 使用 Google Feeds API 使用 "tap"在 jquery mobile 中自动生成 feed 列表

Question

我在生成由列表项上的点击事件触发的 Feed 项列表(使用 Google Feeds API)时遇到问题。我可以在页面加载时调用该函数，而且效果很好。但是，当我尝试在“点击”事件上调用该函数时，如果会生成空白页面。

这是我想要触发事件的列表项(我在其上调用“tap”事件):

<li id="welstech" class="listFeeds">
        <a href="#">
         <img src="_images/welstech-logo-db.jpg" alt="WELSTech" />       
         <h2>WELSTech Podcast</h2>
         <p>Discussions about Tech & Ministry</p>
        </a>
       </li>

这是我放置在 html 页面底部的脚本:

    <script type="text/javascript>
    $(document).on('tap', '.listFeeds', function() {
    listAudioPosts("http://feeds.feedburner.com/welstech");
});
    </script>

这是它调用的函数:

function listAudioPosts(feedurl){
    google.load("feeds", "1");
console.log("I'm still going 1");
    function initialize() {
console.log("I'm still going 2");
      var feed = new google.feeds.Feed(feedurl);
      feed.setNumEntries(10)
      var output = '<ul data-role="listview" data-split-icon="info">';
      var name = "welstech";
      feed.load(function(result) {
          if (!result.error) { 
              for (var i = 0; i < result.feed.entries.length; i++) {
                  var entry = result.feed.entries[i];
                  var mediaGroups = result.feed.entries[i].mediaGroups[0].contents[0];
                  var stripContentSnippet = entry.contentSnippet.replace(/[^a-zA-Z 0-9.:-]+/g,'');
                  var stripaContentSnippet = stripContentSnippet.replace('lt--pagingfilter--gt','');
                  output += '<li>';
                  output += '<a href="#">';
                  output += '<h2>' + entry.title + '</h2>';
                  output += '<p>' + stripaContentSnippet + '</p>';
                  output += '</a>';
                  output += '</li>';
                } // loop through all the feeds and create li elements
            } // end of if statement
            output += '</ul>';
            $("#testtouchoutput").html(output).trigger('refresh');
            $.mobile.changePage("#test");
        }); // end feed.load (function(result)
    } // end initialize function
    google.setOnLoadCallback(initialize);   
}

我知道这个函数是有效的，因为我可以在页面加载时使用 html 页面底部的脚本调用它，如下所示。我还知道该函数到达了子函数initialize()，因为我可以看到该子函数之前的console.log 输出，但看不到它之后的输出:

<script type="text/javascript">
    listAudioPosts("http://feeds.feedburner.com/welstech");
</script>

因此，主页加载后，该函数就会运行，并且页面会刷新到我想要生成的列表......除非我想在“点击”事件上生成它。

我是一个相当新的 jquery 程序员，所以我确信这是显而易见的。我错过了什么？

谢谢。

Answer 1

您没有关闭 .on，请尝试如下操作:

<script type="text/javascript>
    $(document).ready(function() {
        var timeTouched;
        $('.listFeeds').bind('touchstart', function() {
            timeTouched = new Date().getTime();
        }
        $('.listFeeds').bind('touchend', function() {
            if (new Date().getTime() - timeTouched < 200) { // Ended touch within 200 milliseconds, counts as a tap
                listAudioPosts("http://feeds.feedburner.com/welstech");
            }
        });
    });
</script>

确保您的脚本位于定义 .listFeeds 元素的上方，并且包含 $(document).ready() 部分，否则它将无法将事件绑定(bind)到该元素。

更新:点击似乎不是一个事件，已更新为潜在的解决方案。

更新 2:尝试使用 .bind 而不是 .on。