JQuery Mobile 自定义主题按钮答案

【问题标题】：JQuery Mobile Custom Theme ButtonsJQuery Mobile 自定义主题按钮
【发布时间】：2014-02-27 19:39:35
【问题描述】：

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

我有一些通过 $("#container").append(...) 注入的动态 html

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

因为它是动态的，所以我需要这样做

$("*[data-role='button']").button();

让它初始化。

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

有什么想法吗？

更新：

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

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

它现在可以正确显示，但仍然不响应整个按钮表面的点击...仅在文本周围（+ 一点边距）

【问题讨论】：

【解决方案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);

Demo

【讨论】：

所以我实际上需要添加每个类而不是为每个按钮都说 data-role='button'？？
@jeff 是的，完全正确。它已被弃用，将在 1.5 中删除。您会注意到锚标记中没有包含spans'。处理起来很简单，速度更快。
前进四步
@jeff haha..JQM 已弃用许多小部件以提高性能。如果您仍想使用data-role，请使用.buttonMarkup() 而不是.button()。它也已被弃用，将被删除，但现在可以使用。