Question

我用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”项目时没有任何反应。我希望我得到一个带有“data-name”值的警报。

PS。即使我宣布这个，我也没有得到警报：

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

有人可以帮助我吗？我是Javascript和jQuery（移动）的初学者。

提前致谢！

Answer 1

您的代码：

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

输出到：

<ul id=personListviewdata-role...

您的javascript需要阅读：

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

请注意，我在开头使用单引号，因此我可以使用双引号。

另外，我建议为每个<ul>提供自己的ID，或者在其上使用CSS类，然后使用$('.myclass').click(function() { ... });

绑定事件

Answer 2

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

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

在当前代码中检查此行：

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

查看您的<li>定义。它应该以{{1}}：

开头

<li>

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

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

尝试更改html <li><a class="yourclass" href="#" id="' + id + '" ><h1>' + label + '</h1><p>'+ customer + '</p></a></li>项，然后添加事件处理程序：

<li>

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

Answer 3

$("#myListview").on("click", "li", function() { 
     alert( $(this).attr("data-name") ); 
};

从listview获取点击的值

3 个答案: