CODEWITHSUNDEEP
javascriptjquerycssbootstrap-slider
Jeremy Thomas
Jeremy Thomas

Reputation: 6674

Bootstrap-slider loading not working

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

Upvotes: 0

Views: 165

Answers (1)

isherwood
isherwood

Reputation: 61063

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.

Upvotes: 1

Related Questions