切換元素的按鈕元素單擊事件不起作用

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