javascript - Bootstrap-slider loading not working -

i think having issue being able select dom elements part of bootstrap-slider. when attempt target them events such click, nothing gets fired.

when refresh page, events fire properly. why might occur?

$(document).on("page:change", function() {     $(".slider-handle")         .on("mousedown", function() {             console.log("focused")             $(".active-handle").removeclass("active-handle");             $(this).addclass("active-handle");         })         .on("mouseup", function() {             console.log("removed")             $(this).removeclass("active-handle");             $(".active-handle").removeclass("active-handle");         })         .on("click", function() {             console.log("removed")             $(this).removeclass("active-handle");             $(".active-handle").removeclass("active-handle");         }) 

if elements aren't visible @ load jquery can't assign event handlers. try this:

$(document).on("mousedown", ".slider-handle", function() { 

to improve performance, replace document persistent ancestor element.