0

我正在开发一个多页 JQM 应用程序。在我的一个页面中，我引入了两个 RSS 提要并使用 jFeed 插件显示它们。

我想做的是在列表视图中捕获单击事件，获取 href 并将其交给 Phonegap/Cordova ChildBrowser 插件，以便它显示在子浏览器中。

我正在努力从点击事件中获取href。我不知道这是上下文或优先级问题，还是我遗漏的非常简单的问题。

在我包含的 app.js 文件中：

$("#chooseEvent").live('pageinit', function(event) {
  $.getFeed({
  url: "https://www1.ucsc.edu/news_events/calendar/rss/Today.ashx",
  complete: function(feed) {
  //called when complete
  //alert('complete');
  },
  success: function(feed) {
  //called when successful
  //alert('success' + feed.title);
  $("#content ul").append('<li data-role="divider" data-theme="b">' + feed.title + '</li>');
    for (var i = 0; i < feed.items.length && i < 10; i++) {
    var item = feed.items[i];
    $("#content ul").append('<li><a href="' + item.link + +"rel=external" + '">' + item.title + '</a></li>');
  }
  // run refresh on the listview to get the theme added correctly
  $('#content ul').listview('refresh');
  },
  error: function(feed) {
  //called when there is an error
  //alert('error');
  }
  // get the item clicked and prepare it for Child Browser
  $("#content ul").on('click', function(e) {
  //var url = this.href; // outputs #
  // var url = e.target; // outputs #
  var url = $(this).attr("href"); // result is undefined
  //var url = this.parent; // result in undefined
  alert(url);
  e.preventDefault();
 });
});

html页面

<div data-role="page" data-title="Campus Events" id="chooseEvent" addBackBtn="true">
<div data-role="header" data-add-back-btn="true">
<a href="index.html" rel="external" data-icon="arrow-l"  data-direction="reverse" class="ui-btn-left" data-theme="b">Back</a>
<h3>Today's Events</h3>
<a href="index.html" data-rel="back" data-icon="home" data-iconpos="notext"  data-direction="reverse" class="ui-btn-right" data-theme="b">Home</a>
</div>

<div data-role="content" id="content">
<ul data-role="listview" id="eventList" data-theme="b">

</ul>
</div> <!-- /content -->    
</div> <!-- /page -->
4

1 回答 1

0

为了获得href事件click，您不应该绑定到新插入的<li>标签，即：

 $("#content li").on('click', function(e) {
     ...
     ...  
 });

或者更确切地说，类似：

$('#content ul').delegate('li', 'click', function () {
    ...
    ...
});

不太确定哪个更好（或差异，真的）。

于 2012-05-18T17:47:26.657 回答