Question

I have the following jquery code:

    $('div#headBannerSearchAgedBetweenSlider').slider({
            range: true,
            min: 18,
            max: 99,
            values: [18, 65],
            change: function(event, ui) {
                    $('span#headerBannerAgedMin').html(ui.values[0]);
                    $('span#headerBannerAgedMax').html(ui.values[1]);
            },
            slide: function(event, ui) {
                if (ui.values[0] == ui.values[1]) {return false;}
            }
    });

The catch is the element ‘div#headBannerSearchAgedBetweenSlider’ is not avalible when the js script is loaded so I need to use something like .live() or .on() to attach the slide event once the element is avaliable.

How do I bind slide to the element ‘div#headBannerSearchAgedBetweenSlider’ once its visible? I tried to wrap the code in the following (using $(this) as the element but I’m not using a click event. I just needs to bind once the element exists.

     $(document).on('click','div#headBannerSearchAgedBetweenSlider', function() {
     });

How do I do this?

thankyou

---

I have tried the following .ready() without luck – is there anything obviously wrong with this?

$('div#headBannerSearchAgedBetweenSlider').ready(function() {
    $('div#headBannerSearchAgedBetweenSlider').slider({
            range: true,
            min: 18,
            max: 99,
            values: [18, 65],
            change: function(event, ui) {
                    $('span#headerBannerAgedMin').html(ui.values[0]);
                    $('span#headerBannerAgedMax').html(ui.values[1]);
            },
            slide: function(event, ui) {
                if (ui.values[0] == ui.values[1]) {return false;}
            }
    });
});

Answer 1

You need to call the plugin once your #headBannerSearchAgedBetweenSlider element has been loaded / is present in the DOM. Since you seem to be using .load() (async) to load your content dynamically it should work like this (I am assuming that you load the div in question into an element #wrapper here):

$('#wrapper').load('/what/ever.php', function(){ //this function will be executed once your content is successfully loaded
    $('div#headBannerSearchAgedBetweenSlider').slider({/*..options go here..*/});
});

See the docs for info on callback-functions for AJAX calls.