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
}