标签: jquery-mobile-button

使用jQuery jquery-1.9.1.js和jQueryMobile 1.3.1(Chrome 26/Windows 7)我无法理解为什么这些"click"事件中的一个绑定到#one1会触发而另一个不会:

HTML:

<div data-role="page" id="one" data-theme="a">
    <div data-role="header" data-position="inline">
        <h1>One</h1>
    </div>
    <div data-role="content" data-theme="a">
        <a href="#" id="one1">[one]</a>
        <a href="#two">two</a>
        <a href="#three">three</a>
    </div>
</div>

JavaScript的:

<script>
$(document).on( "mobileinit", function() {
    $(document).on('click', '#one1', function(e){
        console.log('firing');
    });
    $('#one1').on("click", function() {
        console.log('not firing');
    });
}); 
</script>

当我在JSFiddle中运行它时,当没有包含在"mobileinit"事件中时,两个事件都会触发:http: //jsfiddle.net/9NRwa/

我在这里错过了什么？

我正在使用jquery mobile在本地公司的移动网站上工作.

这是我到目前为止所拥有的

到目前为止,它已经很好,但我遇到了一些问题.

1.
我不知道如何更改标题颜色.我尝试过不同的数据主题.我试图使用自定义CSS样式表.但我没有做任何事情.

编辑 - 好的,显然head标签没有得到像页面其他部分那样的数据角色.所以我删除了.但我仍然需要弄清楚如何改变颜色.我为它写的CSS似乎被覆盖了.

这是实际的标题

<div data-role="header" data-theme="c">

看起来标题的数据角色不做任何事情

2.
call us按钮有一个'href'标签,可以让你拨打电话.问题是,自从我把它放在那里,它就会在盒子周围创建一个非常明显的链接样式.这是一个截屏

如何阻止这种风格？我已经尝试过CSS来阻止它.

a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */

这些工作,但仅限于页面底部的可扩展列表.为什么它们不适用于所有按钮？

我正在转动轮子,我确信这是一个简单的错误.

考虑以下jqm(版本1.3)视图(以haml为单位)

#main-header{'data-role' => 'header'}

#main-content{'data-role' => 'content'}   #main-buttons
    %input#a{'type' => 'button', 'name' => 'a', 'value' => 'A'}
    %input#b{'type' => 'button', 'name' => 'b', 'value' => 'B'}

样式表:

#main-buttons {
  margin: 30px;
  margin-top: 160px;
}   

#a {
  margin-bottom: 60px !important;
}

这里我应用于按钮"a"的margin-bottom风格没有任何影响.我的目标是在两个按钮之间添加一些垂直空间.我错过了什么？

呈现的UI如下所示:

单击菜单中的"主页"按钮时,我想要反向移动页面转换(data-transition ="slide").是否存在类似data-transition ="slideBACK"的内容？