1

我在生成由列表项上的点击事件触发的提要项目列表（使用 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 程序员，所以我确信这很明显。我错过了什么？

谢谢。

4

1 回答 1

0

您没有关闭.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() 部分，否则它将无法将事件绑定到该元素。

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

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

于 2012-08-19T04:11:04.990 回答