向未来元素添加jQuery UI滑块的最有效方法是什么？

Question

目前，我正在使用AJAX重新加载我网站的一部分，其中包含来自jQuery UI的滑块。那些滑块没有重新加载，因为在我的javascript中，它们只加载在DOM上。

core.js

$(function() {
    $('.slider').slider();

    $('#load').click(function() {
       $.getScript('load.js');

    });
});

load.js

$('#foobar').html('<div class="slider"></div><div class="slider"></div>');

index.html

<a href="#" id="load">Click</a>
<div id="foobar">
    <div class="slider"></div>
</div>

我认为这与将滑块添加到未来元素相同。我查看了.delegate()和.live()，我无法让这些工作适合我的情况。有什么建议吗？

我正在寻找一种尽可能不引人注目地解决这个问题的方法。

Answer 1

在ajax回调函数中，您可以告诉jquery ui恢复所有回调，就像您创建它们一样$('.sliders').slider(); 或者，如果您要动态添加它们，您可以执行以下操作：

var $slider = $("<div class='slider'></div>");
$slider.slider();
$slider.appendTo("#sliders");

JS Fiddle link for my example

修改 试试这段代码：

$.getScript('load.js', function(){
  $('.sliders').slider();
});

Answer 2

我会这样做有点不同。让我知道您为什么或为什么不喜欢以下方法。

<强> core.js

$(function() {
    $('.slider').slider();

    $('#load').click(function() {
       $.ajax
       (
           url: 'load.html',//url for ajax call
           //run function on success. the contents is passes as @param data or whatever you choose
           success: function(data)
           {
                $('#foobar').html(data);//add to dom
                //bind here 
                $('.slider').slider()//if this line doesnt work use delegate 
           }
    });
});

<强> load.html

<div class="slider"></div><div class="slider"></div>