html按鈕不響應jquery點擊方法

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

});

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

非常感謝您的回覆。

來源

2014-01-30 user2502562

你嘗試過'.toggleAutoPlayBtn'而不是'＃toggleAutoPlayBtn'嗎？ – ElliotM

類選擇你需要使用.和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

來源

2014-01-30 21:06:12 hemanth

感謝您的迴應！對不起，我意識到我在嘗試一切時粘貼了錯誤的按鈕代碼。我在那裏有「身份證」。還是行不通。 – user2502562

@ user2502562 http://jsfiddle.net/fenderistic/P4SaM/它在這裏工作，你看到你的控制檯有任何錯誤？ – ElliotM

啊哈！控制檯！是的，我實際上是：未捕獲的類型錯誤：對象[對象對象]的屬性'$'不是函數（索引）：253 （匿名函數） – user2502562

這聽起來像這個問題更多的是基礎知識你的腳本。你的功能對我來說似乎很好。我想知道你的函數是否被調用，或者即使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有錯誤，那麼整個腳本不會工作。

來源

2014-01-30 21:25:00 Jackques

我根本沒有加載js腳本。警報有幫助。目前「功能不工作」與控制檯說：未捕獲TypeError：對象[對象對象]沒有方法'royalSlider'（索引）：258 （匿名函數）（索引）：258 x.event.dispatch jquery .js：5095 v.handle – user2502562

至於royalSlider插件，它會加載並顯示所有圖片。我想添加播放/暫停按鈕。我的猜測也是，我必須仔細檢查，如果我引用了正確的滑塊ID。 – user2502562

Uncaught TypeError：Object [object Object]沒有方法'royalSlider'（index）：258（anonymous function）（index）：258 x.event.dispatch jquery.js：5095實際上表示對象不能使用royalSlider函數。如果您正在編寫功能（專用名稱），請仔細檢查文檔。我沒有插件，因爲它是商業插件，所以我不能檢查你 – Jackques

html按鈕不響應jquery點擊方法

回答

相關問題