Javascript onChipAdd和onChipDelete不调用函数

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

---

谢谢

您必须像这样使用

选项

来调用芯片的回调函数

<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>

document.addEventListener（'DOMContentLoaded'，函数（）{
变量选项={
onChipAdd（）{
控制台日志（“添加”）；
},
onChipSelect（）{
控制台日志（“选定”）；
},
onChipDelete（）{
控制台日志（“已删除”）；
},
占位符：'ENTER un filtre'，
第二个占位符：“+filter”，
自动完成选项：{
数据：{
“苹果”：空，
“Microsoft”：null，
“谷歌”：空
},
极限：无限，
最小长度：1
}
}
var elems=document.querySelector（'.chips'）；
var实例=M.Chips.init（元素、选项）；
});

---

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

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的beavior是一个好的beavior，但是它工作正常

下面的代码对我来说很好。我对杰玛的答案稍加修改。唯一不同的是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);
     });

---

仍然不工作<代码>文档.addEventListener（'DOMContentLoaded'，function（）{var options={placeholder:'enter un filter'，secondary placeholder:'+filter'，autocompleteOptions:{data:{{%for tag in tags%}}{{{tag tag}}null，{%endfor%}，limit无穷大，minLength:1}，onChipAdd（）{console.log（“added”）；}，onChipDelete（）{console.log（“deleted”）；}var elems=document.querySelector（'.chips'）；var实例=M.chips.init（elems，options）；}@Altire，你现在能检查一下吗？嗯，有点问题，但苹果和微软上显示的是“添加的”：我不能删除自动完成的芯片这很奇怪，我可以删除自动完成的芯片，每个芯片都显示“添加的”。