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>

所以第二个主页加载，函数运行，页面刷新到我想要生成的列表...除了我想在“tap”事件中生成它。

我是一个相当新的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（）部分，否则它将无法将事件绑定到该元素。

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

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

使用Google Feeds API在jquery mobile中自动生成供稿列表，使用＆＃34;点按＆＃34;

1 个答案: