чипы materializecss onChipAdd обратный вызов не работает - PullRequest
Новая
       6

чипы materializecss onChipAdd обратный вызов не работает

0 голосов
/ 27 октября 2018

Я пишу поле формы, используя materializecss, который содержит mat-chips с опцией автозаполнения. Идея состоит в том, чтобы делать запрос PATCH каждый раз, когда добавляется новый чип. Ниже приведен фрагмент кода, который я сейчас использую: 

$('#tag-chips').material_chip({
        autocompleteOptions: {
            data: {
                'golang': null,
                'docker': null,
                'kubernetes': null
            }
        },
        onChipAdd: () => {
            console.log('tag added');
        }
    });

Поле фишек работает отлично, но обратный вызов никогда не срабатывает. Также в консоли нет сообщения об ошибке.

Я также попробовал другой способ добиться этого, основываясь на нескольких поисках, которые я предложил: 

$('#tag-chips').on('chip.add', (event, chip) => {
        console.log(event, chip);
});

Но без помощи.

Ответы [ 2 ]

0 голосов
/ 27 октября 2018

ES6 способ, используя функцию стрелки, вы можете вызывать функции, подобные этой.

HTML 

<div class="container">
    <div class="chips chips-autocomplete"></div>
</div>

JQuery 

$(document).ready(function () {
    $('.chips-autocomplete').chips({
        autocompleteOptions: {
            data: {
                'Apple': null,
                'Microsoft': null,
                'Google': null
            },
            limit: Infinity,
            minLength: 1
        },
        onChipAdd: () => {
            console.log("Chip Added");
        },
        onChipSelect: () => {
            console.log("Chip Selected");
        },
        onChipDelete: () => {
            console.log("Chip Deleted");
        }
    });
});
0 голосов
/ 27 октября 2018

Вот у меня рабочий пример.Вызвать обратный вызов так: 

onChipAdd: function(e) {
    console.log(e);
}


$('.chips-initial').chips({
    autocompleteOptions: {
        data: {
            'golang': null,
            'docker': null,
            'kubernetes': null
        }
    },
    onChipAdd: function(e) {
    console.log(e);
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
    
<!-- Default with no input (automatically generated)  -->
  <div class="chips chips-initial"></div>
...