javascript - Materialise CSS on chip 删除

Question

我一直在尝试获取已删除的标签 chip来自 Materialise chips 类中的 div，但没有任何效果。

这是我已经尝试过的。

$('.chips').on('chip.delete', function(e, chip){
    console.log(chip);
    console.log(e);
    console.log(chip.tag);
});

以上均无效。

仅使用 console.log(chip)，我在 JavaScript 控制台中收到未定义的错误，但是当我删除芯片时该函数正在触发。我只是无法获得已删除芯片的标签值。我想将标签存储在变量中。

我在 Materialise 日期选择动态创建筹码:

$('#pm_date').change(function () {
    var chipvalue = $(this).val();

    if (chipvalue !== "") {

        // checking if tag already exits
        if ($("#date_chip_select:contains(" + chipvalue + ")").length > 0) {
            alert('Date already selected');
        } else {
            var appendstring = "<div class='chip' id='date_chip_child_" + chip_id + "'>" + chipvalue + "<i class='material-icons close'>close</i></div>";
        }
    }
});

这是 fiddle : https://jsfiddle.net/hq22mne4/1/

Answer 1

chips.js 是 materialize 的一部分，它似乎没有公开任何以编程方式添加或删除筹码的方法。它似乎只监听 enter keydown 事件，然后在内部添加芯片。

因此，我拼凑了一个解决方法来做到这一点。我在您的 onchange 事件中设置了潜在筹码的值(value):

$("#datechips").find('input').val($(this).val());

并在date picker is closed时创建芯片:

$('.datepicker').pickadate({
    selectMonths: true,
    selectYears: 15,
    onClose: function() {
        // add chip via filling the input and simulating enter
        $("#datechips").find('input').trigger({ type : 'keydown', which : 13 });
},
});

这可能并不理想，但您应该能够在未来进行调整。

https://jsfiddle.net/j3ej8240/