Question

我一直在尝试从Materialize芯片类中的div获取已删除芯片的标签，但没有任何效果。

这是我已经尝试过的。

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

以上都不起作用。

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

我在物化日期选择中动态创建筹码：

$('#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>"; 
        }
    }
});

这是小提琴https://jsfiddle.net/hq22mne4/1/

Answer 1

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

所以，我把一个解决方法拼凑起来。我在onchange事件中设置了潜在芯片的价值：

$("#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/

Answer 2

我在解决这个问题上也遇到了很多麻烦。这就是我在不使用JQuery的情况下捕获添加和删除芯片事件的方法：

function chipDeleted(e, data) {
    console.log("Chip was deleted with text: " + data.childNodes[0].textContent);
}

function chipAdded(e, data) {
    console.log("Chip was added with text: " + data.childNodes[0].textContent);
}



// 
document.addEventListener("DOMContentLoaded", function (e) {
    console.log("DOM fully loaded and parsed");
    var firstTag = "Initial Tag";
    var elems = document.querySelectorAll('.chips');
    var instances = M.Chips.init(elems, {
        data:[{
              tag: firstTag 
          }],
        autocompleteOptions: {

            limit: Infinity,
            minLength: 1
        },
        placeholder: "No search...",
        onChipDelete: function (e, data) { chipDeleted(e, data) },
        onChipAdd: function (e, data) { chipAdded(e, data) }
    });
});

我的HTML就像这样

<body>
    <div class="chips search-history"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

</body>

MaterialiseCSS片上删除

2 个答案: