Question

我不知道为什么要遵循官方文档，但是在添加和删除芯片时不会调用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") }
  });
});

谢谢

Answer 1

您必须像这样使用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>

Answer 2

好吧，我在与团队的聊天中得到了答案：

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的这种行为是好方法，但是它是有效的

Answer 3

以下代码对我来说很好。我在上面稍微修改了Germa的答案。唯一不同的是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);
     });

onChipAdd和onChipDelete不调用函数

3 个答案: