Javascript 按钮元素单击事件以切换类别'；行不通

我有一个功能齐全的开/关按钮

我已经准备好了所有的元素，我希望按下按钮时启动按钮类

只是不管我怎么做都不行

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





我正在jquery中添加HTML：

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

“”+
“；”+
''+
''+
''+

我猜这是CSS元素之间的冲突，但我不能指出问题所在

有什么想法吗？
试试这个

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

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


$（文档）.ready（函数（）{
$（'#按钮'）。在（'单击'，函数（）上）{
$（this.toggleClass（'on'）；
});
})
在JSFIDLE中，您在
$（document）.ready（）中正确地绑定了事件，而在您自己的页面中则没有。因此，在JSFIDLE中，只有在DOM就绪后，事件才能正确绑定到
按钮
元素，而在您自己的页面中，事件无法绑定，因为该元素在该阶段还不存在。
我可以在您页面的HTML中看到：

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


$（函数（）{
$（“#玩家”）.metroPlayer（）；
});
$（'#按钮'）。在（'单击'，函数（）上）{
$（this.toggleClass（'on'）；
});

您需要将
放在（）上
函数内的
$（函数（）{…}）
试试这个

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

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

Thanx m8，但我必须接受Enve的回答。他是第一个：）谢谢你的帮助！Thanx Enve，我从没想过它会如此简单，容易被忽视，一旦超过9分钟的限制，我会接受的。