Spinner图标似乎不适用于<button>标签</button>

时间:2014-11-28 15:52:02

标签: javascript jquery html css flask

点击此示例时,我正尝试使用微调器重新创建按钮:http://jsfiddle.net/AndrewDryga/GY6LC/

HTML

A and Button tags:
<p>
<a class="btn btn-success has-spinner">
   <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
   Foo
 </a>
</p>
<p>
  <button class="btn btn-success has-spinner" name="btn">
    <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
    Foo
  </button>
</p>    

CSS

.spinner {
  display: inline-block;
  opacity: 0;
  max-width: 0;

  -webkit-transition: opacity 0.25s, max-width 0.45s; 
  -moz-transition: opacity 0.25s, max-width 0.45s;
  -o-transition: opacity 0.25s, max-width 0.45s;
  transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we animate additional hidden     width */
}

.has-spinner.active {
cursor:progress;
}

.has-spinner.active .spinner {
opacity: 1;
max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */
}

JS

$(function(){
$('a, button').click(function() {
    $(this).toggleClass('active');
});
});    

我可以重新创建标记按钮但不能使用标记。在他的网站(顶部链接),他们都工作相同。我有什么遗失的吗?

我在烧瓶中使用WTFforms实现这一点,所以我通过request.form.get ['btn']获取事件,看来在烧瓶标签内部有html导致问题

非常感谢任何帮助。

编辑:对不起,我已经缩小了当我包含按钮名称时出现的问题

0 个答案:

没有答案