javascript - Materialize CSS on chip delete - Stack Overflow

admin管理员组

文章数量:1356324

I have been trying to get the tag of a deleted chip from the div in the Materialize chips class, but nothing is working.

Here is what I have already tried.

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

None of the above is working.

With just only console.log(chip), I get undefined error in JavaScript console, but the function is firing when I delete the chip. I am just not able to get the value of tag of deleted chip. I want to store the tag in a variable.

I am creating chips dynamically on Materialize date select:

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

Here is the fiddle: /

I have been trying to get the tag of a deleted chip from the div in the Materialize chips class, but nothing is working.

Here is what I have already tried.

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

None of the above is working.

With just only console.log(chip), I get undefined error in JavaScript console, but the function is firing when I delete the chip. I am just not able to get the value of tag of deleted chip. I want to store the tag in a variable.

I am creating chips dynamically on Materialize date select:

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

Here is the fiddle: https://jsfiddle/hq22mne4/1/

• javascript
• jquery
• html
• css
• materialize

Share Improve this question Follow edited Jul 29, 2021 at 14:20 Peter Mortensen 31.6k2222 gold badges110110 silver badges133133 bronze badges asked Jan 18, 2017 at 11:06 Bilal SardarBilal Sardar 11511 silver badge1010 bronze badges 5

• can you show us more code...... as it is working fine for me jsfiddle/hq22mne4 – Kiran Shinde Commented Jan 18, 2017 at 11:31
• chip.delete is not valid jQuery event. That is a bad approach. Better you can connect your chip deleting function with the code you want to run when a chip is deleted. – Hokusai Commented Jan 18, 2017 at 11:33
• i am dynamically adding chips on materialize date select – Bilal Sardar Commented Jan 18, 2017 at 11:34
• can you fiddle it? – Kiran Shinde Commented Jan 18, 2017 at 11:35
• i have updated the fiddle – Bilal Sardar Commented Jan 18, 2017 at 11:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

chips.js, which is part of materialize, doesn't seem to expose any methods for adding or removing chips programmatically. It seems to exclusively listen for an enter keydown event and then internally add the chip.

So, I stitched together a workaround that does just that. I set potential chip's value within your onchange event:

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

And create the chip when 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 });
},
});

It may not be ideal, but you should be able to tailor this going forward.

https://jsfiddle/j3ej8240/

I've also had a lot of trouble working this out. This is how I capture the add and delete chip events without using 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
          }],
        autopleteOptions: {

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

And my HTML part is like this:

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

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

</body>

本文标签： javascriptMaterialize CSS on chip deleteStack Overflow