CODEWITHSUNDEEP
javascriptjqueryhtmlbuttonclick
user2502562
user2502562

Reputation: 25

html button not respond to jquery click method

Hello I am fairly new to jquery, I have researched this topic on this forum and this still doesn't work for me. I have a gallery that is playing images that I want to add a pause button to. I can't get the code to respond respond to a click on the button. 

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

I have tried this to test (didn't work):

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

I have also tried this to test (didn't work)

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

I have tried exchanging 'id' to 'class' (# to .) (didn't work) I have tried "live" instead of "on" (didn't work)

This is the actual code: it's in my footer and I'm running this out of 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>

This is my final code:

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

});

Can't remember if I have tried anything else now, maybe I'm missing some basic step? Does it matter where the button is? Of course I do have the code wrapped in . Any other really basic things I might have overlooked?

Many thanks for any response.

Upvotes: 0

Views: 1420

Answers (2)

Jackques
Jackques

Reputation: 107

It sounds like the problem is more in the basics of your script. Your functions seem to be fine by me. Im wondering if your function is being called at all, or if even jquery is being loaded/active.

I would suggest adding these alerts to your script:

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

});

If both of these alerts are working, then at least we know the probem lies in the function itelf. If not, then check if jquery is actually being loaded or if why the function isnt being called.

Also check if the royalSlider plugin is being loaded properly. Problem also may be there. If Javascript has an error then the entire scripts wont work.

Upvotes: 0

hemanth
hemanth

Reputation: 1043

for class selector you need to use . and for id selector you have to use #

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

Edit:

Added Fiddle

Upvotes: 1

Related Questions