jQuery Mobile自定义主题按钮 [英] JQuery Mobile Custom Theme Buttons

问题描述

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

I just started using a jquery mobile custom theme instead of one of the defaults. Lots of issues...but the current one is that dynamically created buttons don't work as expected.

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

I have some dynamic html I'm injecting via $("#container").append(...)

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

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

Because it's dynamic, I need to do

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

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

进行初始化.

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

Although my button now looks like a button, the anchor instead still looks like a hyperlink and the click event only fires when clicking on the hyperlink inside the button, not on other areas of the button itself.

有什么想法吗?

更新:

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

If I use a div like so instead of an anchor

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

现在它可以正确显示，但仍然无法响应整个按钮表面上的点击...仅在文本周围(略有空白)

It displays correctly now, but still doesn't respond to clicks across the entire button's surface...only around the text (+ a tiny bit of margin)

推荐答案

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

data-role=button is deprecated so you need to add classes manually and it doesn't require any manual enhancement even if you append them dynamically. .button() is used for <input type=button> only.

您的解决方案如下:

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-Custom: is theme swatch i.e. ui-btn-a

    ui-btn-icon-Position:图标的位置，左，右，上，下或下一个，即ui-btn-icon-left

    ui-btn-icon-Position: icon's position, left,right,top,bottom or notext i.e. ui-btn-icon-left

    ui-icon-Name:图标的图像，即ui-icon-home

    演示

    Demo

    这篇关于jQuery Mobile自定义主题按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！