0

我有以下 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;}
            }
    });

问题是加载 js 脚本时元素“div#headBannerSearchAgedBetweenSlider”不可用，因此一旦元素可用，我需要使用 .live() 或 .on() 之类的东西来附加幻灯片事件。

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

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

1 回答 1

1

#headBannerSearchAgedBetweenSlider一旦你的元素被加载/存在于 DOM 中，你需要调用插件。由于您似乎正在使用.load()(async) 动态加载您的内容，它应该像这样工作（我假设您将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 调用的回调函数的信息，请参阅文档。

于 2012-10-07T09:15:24.247 回答