动态添加元素到控制组jQuery mobile 1.3

Question

在动态添加或删除controlgroup中的元素时，我总是遇到问题。值得庆幸的是，JQM 1.3为此提供了一个示例。

链接：http://www.uglymongrel.com/jqm/touch/demos/examples/controlgroups/dynamic-controlgroup.php

但是示例代码非常令人困惑。任何人都可以解释container()方法是如何工作的以及buttonMarkup()方法是什么？

$( "#my-controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );

Answer 1

您可能知道为 jQuery Mobile 撰写的 HTML 实际上与最终结果不一样。当 jQuery Mobile 构建页面时，它会更改其最终的 HTML 内容。

了解您的理解是什么 container element 非常重要。执行此方法时：

$( "#my-controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );

方法将填充 controlgroup #my-controlgroup 内容。只需访问 $('#my-controlgroup') ，就无法向我们提供 DOM 内容的正确 controlgroup 位置。

这部分：

[ $( this ).attr( "id" ) ]

此处仅代表 controlgroup 数组中的第n个 controlgroups 。

有关此内容的更多信息，请参阅官方文档 HERE 。

关于第二个问题，这个方法：

buttonMarkup()

用于更改 jQuery Mobile 按钮外观。例如，这将改变按钮角落的外观：

$( "a" ).buttonMarkup({ corners: false });

或更改按钮图标：

$( "a" ).buttonMarkup({ icon: "star" });

可以在 HERE 找到。

Answer 2

 $( "#my-controlgroup" ).controlgroup( "container" )[ $( this ).attr(
 "id" ) ]( $el );

这转化为

$( "#my-controlgroup" ).controlgroup( "container" ).append( $el );
OR
$( "#my-controlgroup" ).controlgroup( "container" ).prepend( $el );

其中$ el正在记录，但要添加或添加到组中的新元素。令人困惑的是这个演示代码中的部分是它们在clicked元素的ID属性中保留了方法名称（append，prepend），这就是它们如何基于单击的元素动态地识别操作。