将 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 链接

编辑：
试试这个代码：

$.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>