3

使用 JQ 和 JQM 开发 phonegap 应用程序,这 1 个奇怪的问题真的把我难住了。我真的可以使用我能得到的所有帮助,谢谢大家!

有点难以解释,但是当这 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!
4

1 回答 1

0

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

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

而是尝试用这个替换该行: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"
});
于 2012-11-30T18:04:24.967 回答