添加noUiSlider jQuery后jQuery无法正常工作

时间:2016-10-11 02:22:30

标签: javascript php jquery html nouislider

我想通过单击其子元素来删除表格行。

  //cart remove line
  $('.cartlineremove').click(function(e) {
    $(this).closest('tr').remove()
  });

这已经过测试并且有效。

然而,当我添加一些其他jQuery方法(一些功能用于另一个php页面,但我的所有jQuery都在main.js中)时,删除图标不再起作用。为什么呢?

        //on search page, price range slider
        var handlesSlider = document.getElementById('slider-handles');
          noUiSlider.create(handlesSlider, {
            start: [ 0, 5000 ],

            range: {
                'min': [ 0 ],
                'max': [ 5000 ]
            },
            format: wNumb({
                decimals: 0
            })
          });

          var inputPriceMin = document.getElementById('pricemin');
          var inputPriceMax = document.getElementById('pricemax');

          handlesSlider.noUiSlider.on('update', function( values, handle ) {

            var value = values[handle];

            if ( handle ) {
                inputPriceMax.value = value;
            } else {
                inputPriceMin.value = value;
            }
          });

          inputPriceMin.addEventListener('change', function(){
            handlesSlider.noUiSlider.set([this.value, null]);
          });

          inputPriceMax.addEventListener('change', function(){
            handlesSlider.noUiSlider.set([null, this.value]);
          });


          handlesSlider.noUiSlider.on('change', function(){
            var $form = $('#filterform');
            var formData = $form.serialize();
            $('#pricespinner').addClass('active');
            $.post('find.php', formData, function(response){
              // do something with response
              $('#results').load('results.php');
              // do something with response ends
            })
            .done(function() {
              $('#pricespinner').removeClass('active');
            })

            .fail(function(){
              alert("Oops something bad happened");
            });
          });

  //on cart page, cart remove line 
  $('.cartlineremove').click(function(e) {
    $(this).closest('tr').remove()
  });

我有一种感觉,这是由于noUiSlider DOM,但是究竟是什么让我在价格范围滑块jQuery中添加的那一刻,删除图标停止了工作?

更新了https://jsfiddle.net/sq66f4ak/5/

尝试删除noUIslider jQuery,你会看到删除图标有效,为什么?

1 个答案:

答案 0 :(得分:0)

在你的js小提琴中,noUiSlider.create失败并出现错误。这也与你的真实代码有关吗?任何先前的脚本错误都将导致最后一个事件绑定不起作用。尝试将删除图标单击移动到脚本顶部进行测试。