Bootstrap-slider loading not working

Question

I think I am having an issue with being able to select DOM elements that are part of bootstrap-slider . When I attempt to target them with events such as click , nothing gets fired.

When I refresh the page, all events fire properly. Why might this 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");
        })

Answer 1

If elements aren't visible at load jQuery can't assign event handlers. Try this:

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

To improve performance, replace document with any persistent ancestor element.