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

Posted 2023-05-07

【中文标题】通过ajax加载时jquery滑块不起作用

【英文标题】：jquery sliders not working when loading through ajax

【发布时间】：2011-10-13 09:06:31

【问题描述】：

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

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

【参考方案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 内容后才会触发该方法。