onChipAdd и onChipDelete не вызывают функцию - PullRequest
Новая
       13

onChipAdd и onChipDelete не вызывают функцию

0 голосов
/ 25 сентября 2018

Не знаю почему, так как я следую официальной документации, но функции onChipAdd и onChipDelete не вызываются при добавлении и удалении чипов. 

document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.chips');
  var instances = M.Chips.init(elems, {
    placeholder: 'Entrer un filtre',
    secondaryPlaceholder: '+Filtre',
    autocompleteOptions: {
      data: {
        {% for tag in tags %}
        {{ tag }}: null,
        {% endfor %}
      },
      limit: Infinity,
      minLength: 1
    },
    onChipAdd: function (e, data) { console.log("test") },
    onChipDelete: function (e, data) { console.log("test") }
  });
});

Спасибо

Ответы [ 3 ]

0 голосов
/ 26 сентября 2018

Хорошо, я получил ответ в чате с командой: 

function chipAddCallback() {
  const lastTagAdded = this.chipsData[this.chipsData.length - 1].tag;
  const message = `"${lastTagAdded}" Chip added!`;
  console.log(message);
}
function chipDeleteCallback() {
  console.log("Chip Deleted!");
}
function init() {
  $(".chips").chips({
    placeholder: "Entrer un filtre",
    secondaryPlaceholder: "+Filtre",
    onChipAdd: chipAddCallback,
    onChipDelete: chipDeleteCallback,
    autocompleteOptions: {
      data: {
        {% for tag in tags %}
        {{ tag }}: null,
        {% endfor %}
      },
      limit: Infinity,
      minLength: 1
    }
  });
}
$(init);

Я не знаю, почему этот способ вызова init хорош, но он работает

0 голосов
/ 06 ноября 2018

приведенный ниже код отлично работает для меня.Я немного изменил ответ Гермы выше.Разница лишь в том, что onChipAdd, onChipSelect и onChipDelete являются функциями стрелок.Проверьте это и попробуйте сами. 

document.addEventListener('DOMContentLoaded', function() {
        let elems = document.querySelector('.chips');
        let options = {
           onChipAdd: () => console.log("added"),
           onChipSelect: () => console.log("Selected"),
           onChipDelete: () => console.log("Deleted"),
           placeholder: 'Entrer un filtre',
           secondaryPlaceholder: '+ filtre',
           autocompleteOptions: {
              data: {
                 'Apple': null,
                 'Microsoft': null,
                 'Google': null
              },
              limit: Infinity,
              minLength: 1
           }
        }
        let instances = M.Chips.init(elems, options);
     });
0 голосов
/ 25 сентября 2018

Вы должны использовать options для вызова функций обратного вызова микросхем. 

<div class="chips"></div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var options = {
            onChipAdd() {
                console.log("added");
            },
            onChipSelect() {
                console.log("Selected");
            },
            onChipDelete() {
                console.log("Deleted");
            },
            placeholder: 'Entrer un filtre',
            secondaryPlaceholder: '+Filtre',
            autocompleteOptions: {
                data: {
                    'Apple': null,
                    'Microsoft': null,
                    'Google': null
                },
                limit: Infinity,
                minLength: 1
            }
        }
        var elems = document.querySelector('.chips');
        var instances = M.Chips.init(elems, options);
    });
</script>

Program - gif

...