JQuery Mobile自定义主题按钮

时间:2014-02-27 19:39:35

标签: jquery jquery-mobile jquery-mobile-button

我刚开始使用jquery移动自定义主题而不是其中一个默认主题。很多问题......但目前的问题是动态创建的按钮不能按预期工作。

我有一些动态html我通过$(“#container”)注入。附加(...)

            <div>
                <a class="view-it" data-role="button" href="">View</a>
            </div>

因为它是动态的,我需要做

$( “* [数据角色= '按钮']”)按钮();

让它初始化。

虽然我的按钮现在看起来像一个按钮,但锚点仍然看起来像一个超链接,点击事件仅在单击按钮内的超链接时触发,而不是在按钮本身的其他区域上。

有什么想法吗?

更新

如果我使用像这样的div而不是锚

            <div class="view-it" data-role="button">
                View 
            </div>

现在显示正确,但仍然没有响应整个按钮表面的点击...仅在文本周围(+一点点边距)

1 个答案:

答案 0 :(得分:1)

不推荐使用

data-role=button,因此您需要手动添加类,即使您动态添加它们也不需要任何手动增强。 .button()仅用于<input type=button>

您的解决方案如下:

var Btn = '<a href="#" class="ui-btn ui-btn-Custom ui-btn-icon-Position ui-icon-Name">Button</a>';

$(".selector").append(Btn);
  • ui-btn-Custom:是主题样本,即ui-btn-a

  • ui-btn-icon-Position:图标的位置,左,右,上,下或音符,即ui-btn-icon-left

  • ui-icon-Name:图标的图片,即ui-icon-home

  

<强> Demo