通过ajax加载时jquery滑块不起作用答案

【问题标题】：jquery sliders not working when loading through ajax通过ajax加载时jquery滑块不起作用
【发布时间】：2011-10-13 09:06:31
【问题描述】：

我正在使用 jquery 滑块插件来创建一些滑块。当我在启动 dom 时直接加载它们时，这很好用，但是当我尝试使用 ajax innerHTML 方法将滑块加载到 div 中时，它们不会被启动。

有没有人知道我该怎么做？

【问题讨论】：

标签： jquery ajax dom innerhtml uislider

【解决方案1】：

您必须再次启动/绑定您的事件。

例如

//Ajax done and innerHTML is set
$('container').slider(); //Just an example... this will bind events.

或者

您可以将事件处理程序更改为 .live 。这处理动态内容。

【讨论】：

【解决方案2】：

通过设置对象的 innerHTML 创建滑块时，滑块不会被初始化。试试这个（对于范围滑块）：

$.ajax({
  url: "get_slider.php",
  success: function(data){
    if(typeof(data) == 'string') data = JSON.parse(data);
    $('#my_slider_id').slider({
            range: true,
            min: data.min,
            max: data.max
        });
  },
  error: function(data){
    // Something went wrong, do stuff here
  }
});

这里我们期望 get_slider.php 返回一个 JSON 对象，其中至少包含一个 min 和一个 max 属性，用于实例化滑块。

【讨论】：

【解决方案3】：

当您使用innerHTMl 将滑块添加到div 时，您必须再次调用滑块设置方法，以便在将滑块添加到div 时将事件附加到滑块。谢谢阿什瓦尼

【讨论】：

【解决方案4】：

尝试使用 $.ajax 方法中的 OnComplete 属性来触发滑块的方法。这将确保只有在加载 ajax 内容后才会触发该方法。

【讨论】：