javascript - 切换类的按钮元素单击事件不起作用

Question

我有一个开/关按钮，这里有特色

我已经准备好所有元素，并且我希望按钮类.on在按下时启动。

只是无论我尝试什么都行不通。

我在 jsFiddle 中添加了确切的代码，它在那里工作，但不在我的页面上。

• jsFiddle
• 我的页面

我在 jquery 中添加 HTML：

'<section>'+
        '<button id="button" href="#">&#xF011;</button>'+
    '<span>'+
    '</span>'+
'</section>'+

我猜这是 CSS 元素之间的冲突，但我无法确定问题所在。

有什么想法吗？

Answer 1

尝试这个

<script type="text/javascript">
    $(document).ready(function(){
        $('#button').on('click', function(){
            $(this).toggleClass('on');
        });
    })
</script>

Answer 2

在 jsFiddle 中，您正确地将事件绑定在 中$(document).ready()，而在您自己的页面中则没有。所以在 jsFiddle 中，只有在 DOM 准备好后，事件才会正确绑定到button元素，而在您自己的页面中，事件无法绑定，因为该元素在该阶段尚不存在。

Answer 3

我可以在您页面的 HTML 中看到这一点：

<script>
   $(function(){
      $('#player').metroPlayer();
   });
</script>
<script type="text/javascript">
   $('#button').on('click', function(){
      $(this).toggleClass('on');
   });
</script>

您需要将您的on()功能放在$(function() { ... });

Answer 4

尝试这个

 $(document).ready(function(){
      $('#button').click(function(){
         $(this).toggleClass('on');
      });
    });