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」アイテムをクリックしても何も起こりません。「data-name」の値でアラートが表示されると思います）。

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();
    }  
}

フォーマットに問題がある場合は、jQueryDocsを確認してください。

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