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。）（不起作用）我尝试过“现场”而不是“开启”（不起作用）

这是实际的代码：它在我的页脚中，我在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有错误，那么整个脚本都不会工作。

html按钮不响应jquery单击方法

2 个答案: