Question

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

有什么事情我知道怎么做吗？

Answer 1

您必须再次发起/绑定您的活动。

e.g

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

或者

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

Answer 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属性，用于实例化滑块。

Answer 3

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

Answer 4

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

通过ajax加载时jquery滑块无法正常工作

4 个答案: