Question

我有一个以here

为特色的开/关按钮

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

无论我尝试什么，它都不会起作用。

我在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');
      });
    });

按钮元素单击事件到toggleClass不起作用

4 个答案: