jquery slider .on()

Question

我有以下jquery代码：

    $('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;}
            }
    });

问题是元素'div#headBannerSearchAgedBetweenSlider'在加载js脚本时不可用，所以我需要使用类似.live（）或.on（）的东西来附加幻灯片事件一旦元素可用。

一旦元素"div#headBannerSearchAgedBetweenSlider"可见，如何将幻灯片绑定到元素？我尝试将代码包装在以下内容中（使用 $（this） 作为元素，但我没有使用 click 事件。一旦元素存在，我只需要绑定。

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

我该怎么做？

谢谢

---

我已经尝试了以下 .ready（） 但没有运气 - 这有什么明显的问题吗？

$('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

一旦您的 #headBannerSearchAgedBetweenSlider 元素被加载/存在于 DOM 中，您需要调用插件。由于您似乎正在使用.load() （异步）来动态加载您的内容，因此它应该像这样工作（我假设您将有问题的div加载到此处#wrapper元素中）：

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

有关 AJAX 调用的回调函数的信息，请参阅文档。