使用Google Feeds API使用“tap”在jquery mobile中自动生成feed列表
Using Google Feeds API to auto generate list of feeds in jquery mobile using "tap"
我在生成由列表项上的点击事件触发的 Feed 项列表(使用 Google Feeds API)时遇到问题。我可以在页面加载时调用该函数,它工作得很好。但是,当我尝试在"tap"事件上调用该函数时,如果生成一个空白页。
以下是我要触发事件的列表项(我在其上调用"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() 一样远,因为我可以看到该子函数之前的控制台.log输出,但看不到它之后的输出:
<script type="text/javascript">
listAudioPosts("http://feeds.feedburner.com/welstech");
</script>
因此,在主页加载的那一刻,函数运行并且页面刷新到我要生成的列表......除了我想在"点击"事件上生成它。
我是一个相当新的jquery程序员,所以我确信这是显而易见的。我错过了什么?
谢谢。
您没有关闭 .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。
相关文章:
- window.location使用jquery mobile实现chrome跳转
- 如何使用javascript或jquery mobile从url读取和显示XML文件
- 显示使用jquery mobile扫描数据角色=页面上的条形码
- 使用PhoneGap和jQuery Mobile在android设备上显示动态列表视图
- 如何在jquery mobile中使用json文件创建动态下拉菜单
- 使用Google Feeds API使用“tap”在jquery mobile中自动生成feed列表
- 如何使用 jQuery Mobile 手动触发页面创建
- 在使用 jQuery Mobile 时在加载时重置 css
- jquerymobile:当 mobile.changepage 使用 reloadpage:true 调用时,目标页面
- JQuery mobile:使用网格将多个图像垂直和水平居中
- 在jQuery Mobile中使用pageInit()初始化代码
- 使用socket.io、jquery mobile、socket.emit();的时序逻辑有点奇怪;
- 使用phonegap在jquery-mobile中链接页面/加载javascript的最佳实践是什么
- 在安卓系统中使用jquery Mobile中的水平滚动
- 在JQuery mobile中的段落中使用变量
- 在我使用$.mobile.changePage后,onload无法工作
- 如果我使用$.mobile.changePage(),则页面显示不正确
- 使用Mobile访问时加载移动版本,否则加载桌面版本
- 使用Mobile和Angular需要来自Kendo核心的哪些文件
- Jquery Mobile-使用$.Mobile.navigate后事件不会绑定