Question

我目前在获取jquery noUISlider处理附加元素时遇到了问题。我通过ajax将新元素追加到我的DOM。这些元素没有启用noUiSlider。我的代码如下。如果有人在过去解决了这个问题，我将不胜感激：

以下是用于最初为每个项目创建滑块的代码：正如您所看到的，我只是循环遍历使用滑块标记的dom元素，并使用带有一些参数的库本机函数

$('.slider').each(function()

{

// get prod id
var id = $(this).attr('data-id');

// get max price of product
var max = parseInt($(this).attr('data-max'));

// get current price of product
var current = parseInt($(this).attr('data-current'));

// initiate slider
$(this).noUiSlider({
    start: current,
    step: 1,
    range: {
        'min': 1,
        'max': max,
    },
    connect:'lower'

});     

// link slider to input
$(this).Link('lower').to($('#output-'+id));

// slider event handler
$(this).on({

    // on slider change
    change: function()
    {

        // get product form
        var form = $('#update-'+id);

        // initiate AJAX call
        $.ajax({
            type: form.attr('method'),
            url: form.attr('action'),
            data: form.serialize(),
            dataType: "json",
            success: function(data){

                // update UI
                var ui = $('#product-'+id).find('.status');
                ui.fadeOut(300);
                ui.fadeIn(300);

            }
        });
    }

});

}）;

这是我追加元素的代码

 // exectute paginate
  $.ajax({
    url: paginate_link,
    type: "GET",
    dataType: "HTML",
    success: function(data) {

      // generate next page
      var next_page = page + 1;

      // append products
      $('.grid-products').append(data);

      // check if we still have more
      if(next_page <= max_page)
      {

        // increment page counter
        $('.lazy-paginate').attr('data-page', next_page);

      }
      else 
      {

        // hide
        $('.lazy-paginate').addClass('resp-hidden');

      }

    }
})

现在问题是这些附加元素没有noUISlider可以使用它们。我不能简单地运行（'slider'）。再次使用noUISlider，因为这会重置页面上可能已更改其值的所有元素。无论如何使用与第一次仅在新元素上相同的设置再次运行滑块功能。

任何帮助将不胜感激。感谢

Answer 1

通过将我的noSlider初始化包装在我在页面加载时运行的函数以及加载更多产品时来管理解决问题。当我运行.each没有滑块的东西时，我只是删除滑块类，所以在下次加载时它不会尝试做相同的DOM元素。

在appeneded元素上调用Jquery NoUISlider

1 个答案: