Question

使用JQ和JQM处理一个phonegap应用程序，这个奇怪的问题真的让我很难受。我真的可以使用我能得到的所有帮助，谢谢大家！

当这2个事件处理程序看起来几乎完全相同时，有点难以解释但是无法让.data（）以2动态绑定事件处理程序的方式工作。我一定错过了某个地方......叹了口气..

HTML

            <ul data-role="listview" id="notelist" data-split-icon="minus" data-split-theme="c">
                <li id="entrytemplate" style="display:none">
                    <a class="btnpopupdetails" href="#" data-position-to="window" data-rel="popup" data-transition="pop">
                        <h3>TEMPLATE Faulty lift</h3>
                        <p>TEMPLATE Lift A1, at lobby, Skyscraper Plaza, was reported broken down on 25th Dec 2012</p>
                    </a>
                    <a class="btndelete" href="#" data-position-to="window" data-rel="popup" data-transition="pop">Delete</a>
                </li>
            </ul>

JS

// row is a single row from a resultset of a successful sql query

newrow.data('rowid', row.id); // integer

newrow.data('rowtitle', row.txttitle); // text

newrow.data('rowdescription', row.txtdescription); // text

console.log(newrow.data('rowtitle')); // value retrieved and displayed fine!

console.log(newrow.data('rowdescription')); // value retrieved and displayed fine!

newrow.appendTo('#notelist');

newrow.find('h3').text(row.txttitle);

newrow.find('p').text(row.txtdescription);


newrow.find('.btnpopupdetails').click(function() {

  selectedrow = $(this).parent();

  selectedrowid = selectedrow.data('rowid');

  selectedrowtitle = selectedrow.data('rowtitle');

  selectedrowdscription = selectedrow.data('rowdescription');

  console.log(selectedrow.data('rowid')); // "TypeError: 'undefined' is not an object"

  console.log(selectedrow.data('rowtitle')); // "TypeError: 'undefined' is not an object"

  console.log(selectedrow.data('rowdescription')); // "TypeError: 'undefined' is not an object"
});


newrow.find('.btndelete').click(function() {

  selectedrow = $(this).parent();

  selectedrowid = selectedrow.data('rowid');

  selectedrowtitle = selectedrow.data('rowtitle');

  selectedrowdscription = selectedrow.data('rowdescription');

  console.log(selectedrow.data('rowid')); // value retrieved and displayed fine!

  console.log(selectedrow.data('rowtitle')); // value retrieved and displayed fine!

  console.log(selectedrow.data('rowdescription')); // value retrieved and displayed fine!

Answer 1

我知道可能会发生什么：当jQM增强<a>中链接<li>的标记时，它实际上将其包含在2个div中。加载页面后检查您的标记以确认这一点。如果我将标记加载到<li>，则第一个<a>会出现在2个div中，第二个是<li>的直接子项，所以这可以解释您所看到的行为

这意味着，当您指出selectedrow = $(this).parent();时，我怀疑它指的是包含您<a class="btnpopupdetails">的div而不是您附加数据的<li>;

请尝试使用以下代码替换该行：selectedrow = $(this).closest('li');或者为<li>新成员提供一个新课程并使用$(this).closest('.newClass')

试一试，让我知道这是怎么回事。应该看起来像这样（这两个元素都是正确的1个处理程序）：

newrow.find('.btnpopupdetails, .btndelete').click(function() {  
  selectedrow = $(this).closest('li');    // THIS HAS CHANGED!
  selectedrowid = selectedrow.data('rowid');
  selectedrowtitle = selectedrow.data('rowtitle');
  selectedrowdscription = selectedrow.data('rowdescription');
  console.log(selectedrow.data('rowid')); // "TypeError: 'undefined' is not an object"
  console.log(selectedrow.data('rowtitle')); // "TypeError: 'undefined' is not an object"
  console.log(selectedrow.data('rowdescription')); // "TypeError: 'undefined' is not an object"
});

事件绑定中的.data（）

1 个答案: