1

我目前在让 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 ，因为这将重置页面上可能已更改其值的所有元素。无论如何，仅在新元素上使用与第一次相同的设置再次运行滑块功能。

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

4

1 回答 1

1

通过将我的 noSlider 初始化包装在我在页面加载和加载更多产品时运行的函数中，设法解决了这个问题。当我运行 .each 没有滑块的东西时，我只是删除了滑块类，因此在下次加载时它不会尝试执行相同的 DOM 元素。

于 2015-07-30T15:12:33.167 回答