Javascript html按钮不响应jquery单击方法

您好，我是jquery的新手，我在这个论坛上研究过这个话题，但这对我来说仍然不起作用。我有一个画廊正在播放我想添加暂停按钮的图像。我无法让代码对点击按钮做出响应

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

我也尝试过这个测试（不起作用）

我尝试将“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>

不记得我现在是否尝试过其他方法，也许我错过了一些基本步骤？按钮在哪里重要吗？当然，我已经把代码包装好了。还有什么我可能忽略的真正基本的事情吗

---

非常感谢您的回复。

对于类选择器，您需要使用

；对于id选择器，您必须使用

//这适用于类为toggleAutoPlayBtn的元素
$（文档）.on（'单击'，'.toggleAutoPlayBtn'，函数（）{
$（“p”）.text（“单击”）；
});
//这适用于id为toggleAutoPlayBtn的元素
$（文档）。在（'click'，'#toggleAutoPlayBtn'，函数（）上{
$（“p”）.text（“单击”）；
});

编辑：

---

添加了

听起来问题更多地出现在脚本的基础上。 我觉得你的功能还不错。我想知道你的函数是否被调用，或者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出现错误，则整个脚本将无法工作。

您是否尝试过

.toggleAutoPlayBtn

而不是

#toggleAutoPlayBtn

？感谢您的回复！对不起，我意识到我粘贴了错误的按钮代码，因为我正在尝试这一切。我在那个地方有身份证。仍然不工作。@user2502562它在这里工作，您在控制台中看到任何错误吗？啊哈！控制台！是的，我确实这样做了：未捕获类型错误：对象[object object]的属性“$”不是函数（索引）：253（匿名函数）我将在“回答您的问题”区域发布代码，因为这太短，无法发布代码。实际上，我将编辑我的原始问题，您可以到此为止，听起来您根本没有引用jquery。把这个放到

部分

然后告诉我们你是否还有问题。我根本没有加载js脚本。警报有帮助。目前“函数不工作”的控制台显示：uncaughttypeerror:Object[Object Object]没有方法“royalSlider”（索引）：258（匿名函数）（索引）：258 x.event.dispatch jquery.js:5095 v.handleAs对于royalSlider插件，它被加载并显示所有图片。我想添加播放/暂停按钮。我的猜测也是，我必须仔细检查我是否引用了右滑块id。未捕获类型错误：Object[Object Object]没有方法“royalSlider”（索引）：258（匿名函数）（索引）：258 x.event.dispatch jquery.js:5095实际上表明该对象无法使用royalSlider函数。如果正确编写函数（正确的名称），请仔细检查文档。我没有插件，因为它是一个商业插件，所以我无法检查youYah，我正在单独研究。如果我去掉这部分代码，按钮文本重命名仍然不起作用，即使您在其上添加了不同的函数？

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

});

 // 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!");
 });

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