html button not respond to jquery click method

Question

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.

Have you tried .toggleAutoPlayBtn instead of #toggleAutoPlayBtn? — em_
– em_, Commented Jan 30, 2014 at 21:04

hemanth · Accepted Answer · 2014-01-30 21:15:31Z

1

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

edited Jan 30, 2014 at 21:15

answered Jan 30, 2014 at 21:06

hemanth

1,0438 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

user2502562 Over a year ago

Thanks for the response! Sorry, I realized that I pasted the wrong button code as I was trying it all out. I've had "id" in that place. Still not working.

em_ Over a year ago

@user2502562 jsfiddle.net/fenderistic/P4SaM It is working here, do you see any errors in your console?

user2502562 Over a year ago

Aha! the console! yes I do actually: Uncaught TypeError: Property '$' of object [object Object] is not a function (index):253 (anonymous function)

user2502562 Over a year ago

I'll post the code in the "answer your question" area as this is too short to post code. Actually I'll edit my original question

em_ Over a year ago

You can stop right there, it sounds like you didn't reference the jquery at all. Put this in the <head> section <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> Then tell us if you still have a problem.

|

Jackques · Accepted Answer · 2014-01-30 21:25:00Z

0

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.

answered Jan 30, 2014 at 21:25

Jackques

1071 silver badge8 bronze badges

5 Comments

user2502562 Over a year ago

I wasn't loading the js script at all. The alert helps. Currently "function is not working" comes up with console saying: Uncaught TypeError: Object [object Object] has no method 'royalSlider' (index):258 (anonymous function) (index):258 x.event.dispatch jquery.js:5095 v.handle

user2502562 Over a year ago

As for the royalSlider plugin, it is loaded and showing all the pictures. I am wanting to add the play/pause button to it. My guess also is that I have to double check if I am referencing the right slider id.

Jackques Over a year ago

Uncaught TypeError: Object [object Object] has no method 'royalSlider' (index):258 (anonymous function) (index):258 x.event.dispatch jquery.js:5095 actually indicates that the object cannot use the royalSlider function. Double-check the documentation if you're writing the function properly (proper name). I don't have the plugin because it's a commercial one so I cannot check for you

user2502562 Over a year ago

Yah, I'm looking into that separately. If I take that part of the code out, the button text rename still doesn't work

Jackques Over a year ago

Not even if you put a different function on it?

Collectives™ on Stack Overflow

html button not respond to jquery click method

2 Answers 2

9 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related