How to get slidestop event handler to work?

Question

I tried to use slidestop handler by following this. i.e.,

$("#tempslider").on("slidestop", function(e){
alert($("#tempslider").val());    
});

However, I could not get it to work, and luckily I read this post and it solved my problem. The solution is that you need to put the code in the pagecreate eventhandler, i.e,

$(document).on("pagecreate", function () {
$("#slider-step").on('slidestop', function (event) {
console.log("slidestop event fired");
});
});

See jsFiddle.

Actually both code work in jsFiddle (first one)(second one), but only the second one works in my project. I am a jQuery newbie. I had hard time figuring out why. Could anyone help to explain why? Thanks!

Hopefully http://stackoverflow.com/questions/14468659/jquery-mobile-document-ready-vs-page-events should answer your question! — Shreerang, Aug 26 '15 at 20:08

Anders · Accepted Answer · 2015-08-26T20:15:16.330

The first one works on JSFiddle, but not in your project, because by default the fiddle JavaScript is put in an onload event and not directly in the head. Therefore it is already run after the page is created, and can thereby access the DOM.

The setting can be seen at the bottom of this screenshot:

A tip not directly related to your question: You can use the keyword this to reference the DOM element that fired an event. Therefore you could replace $("#tempslider").val() with $(this).val().

How to get slidestop event handler to work?

1 Answers1