javascript 方法执行两次 - bootstrap-slider

Question

我有 n 个动态生成的滑块，每个滑块都具有给定的 DOM id slider{n} 。 因为我不知道我会有多少个滑块，所以我将on slideStop事件附加到类，然后使用$(this)获取 id，并执行与该滑块相关的任何操作。

$(".slider").on("slideStop", function(slideEvt) {

    var rowoffset = $(this).attr("id").substring(6);
    $("#percentage" + rowoffset).text(slideEvt.value);
    updateNumbers(rowoffset);

});

除了脚本执行两次updateNumbers()方法外，一切都按计划进行。

正如您在这里看到的那样，我的postdata与每个响应一起记录到控制台两次，一个具有正确的值，第二个调用具有未定义的值。

很明显，第一个响应是对第二个调用的响应。

1. 为什么我的方法会触发两次？ 它与滑块库或jquery有关吗？
2. 即使失败的调用总是第二次执行，为什么对失败的调用的响应首先返回？

这是 updateNumbers 方法，它当然不会调用它自己。

function updateNumbers(rowoffset){

  //get variables from DOM element values

  var percentage = $("#slider" + rowoffset).val();
  var group = $("#rrgroup").val();
  var rrclass = $("#rrclass").val();
  var category = $("#rrcategory").val();
  var subcategory = $("#subcategory" + rowoffset).val();
  var period = $("#rrperiod").val();
  var year = $("#rryear").val();
  var yearmonth = $("#rryearmonth").val();
  var rangesize = $("#rangesize" + rowoffset).text();

  var storesstring = $("#rrstores").val();
  if(storesstring == ""){

     storesarray = [];

  } else {

  var storesarray = storesstring.split(",");

  }

  var postdata = {percentage: percentage,
                  group: group,
                  class: rrclass,
                  category: category,
                  subcategory: subcategory,
                  period: period,
                  year: year,
                  yearmonth: yearmonth,
                  stores: storesarray,
                  rangesize: rangesize};

                  console.log(postdata);

         $.ajax({
          url: "ajaxrangemix.php",
          type: "post",
          dataType: 'json',
          data: postdata,
          success: function (response) {

              console.log(response);

              $("#dropskus" + rowoffset).text(response.skus);
              $("#keepsales" + rowoffset).text(response.sales);

              },
          error: function(jqXHR, textStatus, errorThrown) {

              console.log(textStatus, errorThrown);
            }


      });

}

HTML

            <div class='panel-body' id='rangemixbody'>

                <input type='hidden' id='rrgroup' value="<?php echo $group; ?>">
                <input type='hidden' id='rrclass' value="<?php echo $class; ?>">
                <input type='hidden' id='rrcategory' value="<?php echo $category; ?>">
                <input type='hidden' id='rrperiod' value="<?php echo $period; ?>">
                <input type='hidden' id='rryear' value="<?php echo $yr; ?>">
                <input type='hidden' id='rryearmonth' value="<?php echo $yrmth; ?>">
                <input type='hidden' id='rrstores' value='<?php implode(",", $storename); ?>'>

                <table class='table table-striped'>
                    <thead>
                        <tr>
                            <th>Subcategory</th>
                            <th><span>0%</span><span class="pull-right">100%</span></th>
                            <th>%</th>
                            <th>Current Range Size</th>
                            <th>Drop Skus</th>
                            <th>Keep Sales</th>
                            <th>Sales Share</th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php
                    $i = 0;
                    $subcategories = array();
                    foreach($rangereviewarray as $row){
                    ?>
                        <tr>
                            <td>
                                <input type="hidden" id="subcategory<?php echo $i;?>" value="<?php echo $row['subcategory']; ?>">
                                <?php $subcategories[$i] = $row['subcategory']; ?>
                                <?php echo $row['subcategory']; ?>
                            </td>
                            <td>
                                <input id="slider<?php echo $i; ?>" type="text" class="slider" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="100" data-slider-tooltip="hide">
                            </td>
                            <td>
                                <span id="percentage<?php echo $i; ?>">100</span>%
                            </td>
                            <td>
                                <span id="rangesize<?php echo $i; ?>"><?php echo $row['rangesize']; ?></span>
                            </td>
                            <td><span id="dropskus<?php echo $i; ?>">0</span></td>
                            <td>
                                <input type="hidden" id="sales<?php echo $i; ?>" value="<?php echo $row['sales']; ?>">
                                <span id="keepsales<?php echo $i; ?>"><?php echo number_format($row['sales'], 2); ?></span>
                            </td>
                            <td><?php echo number_format($row['share'], 2); ?></td>
                        </tr>

                    <?php
                    $i++;
                    }
                    ?>
                    </tbody>
                </table>
             <input type='hidden' id='rrsubcategories' value='<?php implode(",", $subcategories); ?>'>
            </div>

Answer 1

很难从问题中确定两次触发事件的原因。 根据附加的屏幕截图，我唯一的建议是在滑块与任何 DOM 元素无关时取消请求：

function updateNumbers(rowoffset){

    var $el = $("#slider" + rowoffset);
    if( $el.length == 0 ) {
         return;
    }

    //get variables from DOM element values

    var percentage = $el.val();
    var group = $("#rrgroup").val();
    var rrclass = $("#rrclass").val();
    var category = $("#rrcategory").val();
    var subcategory = $("#subcategory" + rowoffset).val();
    ..... rest of the function
}