onchange event handler триггер дважды

Question

Я написал ниже функции jQuery для вызова фильтров на datatable. Но функция «изменения» jQuery, кажется, вызывает два раза за один клик, поэтому, если я пытаюсь отключить один из фильтров, он сразу снова включится.

Функция:

$(document).ready(function() { 
    var table = $('#example').DataTable({ 
     rowReorder: { 
      selector: 'td:nth-child(2)' 
     }, 
     responsive: true, 

     initComplete: function() { 
      var filters = $('div[id$=referalFilters]').find('input:checkbox'); 
      filters.each(function() { 
       dict.push({ 
        key: $(this).prop('name'), 
        value: $(this).prop('checked') 
       }); 
       $(this).change(function() { 
        var currentName = $(this).prop('name'); 

        for (var i = 0; i < dict.length; i++) { 
         if (dict[i].key == currentName) { 
          if (dict[i].value == true) { 
           dict[i].value = false; 
          } else { 
           dict[i].value = true; 
          } 
         } 
        } 
        for (var i = 0; i < dict.length; i++) { 
         if (dict[i].value == true) { 
          $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) { 
           var currentStatus = data[3]; 
           var found = false; 
           for (var i = 0; i < dict.length; i++) { 
            if (currentStatus == String(dict[i].key)) { 
             if (dict[i].value == true) { 
              found = true; 
             } 
            } 
           } 
           if (found) { 
            return true; 
           } 
           return false; 
          }) 
         } 
        } 
        table.draw(); 
       }); 
      }); 
      //this.api().columns().every(function() { 
      // var column = this; 
      //}); 
     } 

    }); 
}); 

Я буду признателен, если кто-то может позволить мне знать, что вызывает функцию смены несколько раз.

Вот jsfiddle: https://jsfiddle.net/a81h11tc/. В Js fiffle кнопка, похоже, переключается, но фильтрация не происходит.

Answer 1

Насколько я могу судить, ваша проблема была неопределенной переменной, dict внутри initComplete. После того, как я добавил var dict = []; до var filters = ..., он работал как шарм. (Я понимаю, что вам нужен столбец Состояние, чтобы скрыть строки, которые содержат значение щелкнутого фильтра. Если вы хотите сделать обратное, измените свой код соответствующим образом.) Вот JSFiddle измененного кода, он должен работать как вы хотели.

TIP: Кстати, помните, чтобы всегда проверять консоль браузера, как и в большинстве случаев вы можете увидеть соответствующие сообщения об ошибках, такие вещи, как это (то есть для кода он сказал RefereceError: dict is not defined, который был в основном только проблема СВОЙ код был).