3

我已经使用 jQuery Mobile 创建了一个动态列表视图，我想获取单击列表项的值。我想要实现这一点的原因是因为我需要这个值来链接到另一个页面并显示有关单击项目的更多详细信息。

我已经在互联网上搜索过，我发现了一个对我不起作用的解决方案。

我的（jQuery Mobile）页面如下所示：

<div data-role="page" id="personList">
    <div data-role="header" data-position="fixed">
        <h1>header</h1>
    </div>

    <div data-role="content">
    </div>

    <div data-role="footer" data-position="fixed">
        footer
    </div>
</div>

我将项目动态添加到列表视图的函数如下所示：

（我使用 HTML5 SQL Web 存储将数据本地存储在设备上）

function showPersons() 
{
  db.transaction (function (transaction)
  {
//get data from table
var sql = "SELECT * FROM person";
transaction.executeSql (sql, undefined, 

//loop through sql result and add results to html variable
function (transaction, result)
{
  var html = "<ul id=" + "personListview" + "data-role=" + "listview" +" data-filter=" + "true" + ">";


  if (result.rows.length) //if there is something found
  {
    for (var i = 0; i < result.rows.length; i++) 
    {
      var row = result.rows.item (i);
      var voorNaam = row.voorNaam;
      var achterNaam = row.achterNaam;
      var email = row.email;

        html += "<li data-theme='e'" + "data-name='test value'>" + "<a href='#'>" +  "<h3>" + voorNaam + " " + achterNaam + "</h3><p>" + email + "</p></a></li>";

    }
  }
  else //if there is nothing found
  {
    html += "<li> No persons found </li>";
  }

  html += "</ul>";

  //Change page
  $("#personList").unbind ().bind ("pagebeforeshow", function ()
  {
    var $content = $("#personList div:jqmData(role=content)");
    $content.html (html);
    var $ul = $content.find ("ul");
    $ul.listview ();
  });

  $.mobile.changePage ($("#personList"));

}, error);});}

如您所见，我在“li”标签中添加了“data-name='test value'”，所以我应该使用以下函数获取该值：

$('#personListview').children('li').click(function() {
alert($(this).attr('data-name')); });

但是，最后一个功能不起作用。当我单击“li”项目时，什么也没有发生。我希望我收到一个值为“数据名称”的警报）。

PS。即使我声明了这一点，我也没有收到警报：

$('#personListview').children('li').click(function() {
    alert('test');

有人可以帮助我吗？我是 Javascript 和 jQuery(mobile) 的初学者。

提前致谢！

4

3 回答 3

1

你的代码：

"<ul id=" + "personListview" + "data-role...

输出到：

<ul id=personListviewdata-role...

您的 javascript 需要阅读：

'<ul id="personListview" data-role=....'

请注意，我在开头使用单引号，因此我可以在整个过程中使用双引号。

另外，我建议给每个人<ul>自己的 ID，或在其上使用 CSS 类，然后将事件与$('.myclass').click(function() { ... });

于 2012-09-14T12:09:36.480 回答
0

尝试将您的点击事件更改为这样的（我建议并假设您<ul>有一个类yourclass）：

$("#personlist").live('pageinit', function() {   
    $('.yourclass').live('vclick', function(e) {
         alert($(this).attr('data-name').val();
    }  
}

还要检查当前代码中的这一行：

alert($(this).attr('data-name').val();

看你的<li>定义。它应该以<li>：

<li><a href="bmw.html">BMW</a></li>

您的 html 格式可能不正确。尝试按照我的示例所示进行操作：

<li><a class="yourclass" href="#" id="' + id + '" ><h1>' + label + '</h1><p>'+ customer + '</p></a></li>

尝试更改您的 html<li>项目，然后添加事件处理程序：

$("#personlist").live('pageinit', function() {   
    $('.yourclass').live('vclick', function(e) {
        alert($(this).attr('data-name').val();
    }  
}

如果出现格式问题，请查看：jQuery Docs。

于 2012-09-14T12:36:26.600 回答
0 
$("#myListview").on("click", "li", function() { 
     alert( $(this).attr("data-name") ); 
};
于 2014-03-27T21:42:23.963 回答