html按鈕不響應jquery點擊方法

Question

你好，我是相當新的jQuery，我在這個論壇上研究過這個主題，這仍然不適合我。我有一個正在播放圖像的畫廊，我想添加一個暫停按鈕。我無法讓代碼響應點擊按鈕。

<input type ="button" id="toggleAutoPlayBtn" value="PAUSE"/>  

我曾嘗試這個測試（沒有工作）：

$(document).on('click', '#toggleAutoPlayBtn', function(){ 
       $("p").text("clicked!"); 
}); 

我也試過這個測試（沒有工作）

$(function(){ 
    $("#toggleAutoPlayBtn").click(function(){ 
     alert('clicked!'); 
    }); 
}); 

我曾嘗試交換'id'到'class'（＃to。）（沒有工作） 我試過「live」而不是「on」（沒有工作）

這是實際的代碼：它在我的頁腳和我跑了這一點WP的：

<footer id="colophon" role="contentinfo"> 
       <div id="footer"> <input type ="button" id="toggleAutoPlayBtn" value="PAUSE"/>  </div> 

<script> 

$(document).on('click', '#toggleAutoPlayBtn', function(){ 
       $("p").text("clicked!"); 
}); 
    </script> 
    </footer><!-- #colophon --> 
</div><!-- #page --> 

<?php wp_footer(); ?> 
</body> 
</html> 

這是我的最終代碼：

$(document).on('click', '#toggleAutoPlayBtn', function(){ 

    var autoStart = true; 
    $('#new-royalslider-2').royalSlider({ 
     // other options... 
     autoPlay: { 
      enabled: autoStart 
     } 
    }); 

    $('#toggleAutoPlayBtn').click(function() { 

      // optionally change button text, style e.t.c. 
      if(autoStart) { 
       $(this).html('play'); 
      } else { 
       $(this).html('pause'); 
      } 
      autoStart = !autoStart; 

      $('#new-royalslider-2').royalSlider('toggleAutoPlay'); 
    }); 

}); 

不記得，如果我已經試過什麼別的現在，也許我錯過了一些基本步驟？它按鈕的位置在哪裏？當然，我的代碼已經包裹了。任何其他我可能忽略的基本事情？

非常感謝您的回覆。

Answer 1

類選擇你需要使用.和id選擇你要使用#

// this is for element with class as toggleAutoPlayBtn 
<input type ="button" class="toggleAutoPlayBtn" value="PAUSE"/> 

$(document).on('click', '.toggleAutoPlayBtn', function(){ 
      $("p").text("clicked!"); 
}); 

// this is for element with id as toggleAutoPlayBtn 
<input type ="button" id="toggleAutoPlayBtn" value="PAUSE"/> 

$(document).on('click', '#toggleAutoPlayBtn', function(){ 
      $("p").text("clicked!"); 
}); 

編輯：

新增Fiddle

Answer 2

這聽起來像這個問題更多的是基礎知識你的腳本。 你的功能對我來說似乎很好。我想知道你的函數是否被調用，或者即使jquery被加載/活動。

我建議將這些警報發到您的腳本：

jQuery(document).ready(function($) { 

alert("jquery is working"); 

var autoStart = true; 
$('#new-royalslider-2').royalSlider({ 
    // other options... 
    autoPlay: { 
     enabled: autoStart 
    } 
}); 

$('#toggleAutoPlayBtn').click(function() { 
     // optionally change button text, style e.t.c. 

      alert("function is working"); 

     if(autoStart) { 
      $(this).html('play'); 
     } else { 
      $(this).html('pause'); 
     } 
     autoStart = !autoStart; 

     $('#new-royalslider-2').royalSlider('toggleAutoPlay'); 
}); 

}）;

如果這兩個警報都起作用，那麼至少我們知道這個探針位於它自己的函數中。如果沒有，那麼檢查jquery是否真的被加載，或者爲什麼函數沒有被調用。

同時檢查royalSlider插件是否正確加載。問題也可能存在。如果Javascript有錯誤，那麼整個腳本不會工作。