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'（# 到 .）（没有用） 我试过“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');
 });

});

如果这两个警报都有效，那么至少我们知道问题在于函数 itelf。如果没有，则检查是否实际加载了 jquery，或者为什么没有调用该函数。

还要检查是否正确加载了royalSlider 插件。问题也可能存在。如果 Javascript 有错误，那么整个脚本将无法运行。