on "remove" event incompatibility with jquery

[Valkhan]

When we have a tag input inside a container and we use: $('.container').empty(), it triggers the $('.tags').on('remove', ... ).

I believe that the name "remove" is conflicting with other similar events from jqueyr causing it to call tagify remove when it's not supposed to.

[yairEO]

If that is the case I would suggest not using Tagify's jQuery version but to use vanilla tagify.

Why does this matter you? what the actual bug?

[Valkhan]

This is my workflow:

1. Open Modal
2. Search for files
3. Empty Files Container
4. Append Files found with tags fields
5. Select a file
6. Close modal

My Tagify events: add, remove, edit, every time any of those are called, the tags for the given file is updated. It's worth mentioning that i'm using this library as is, no customization of any form.

The problem is: each time I "Empty Files Container" or "Close modal" that is a "destructive" operation, "removing" elements from DOM, it triggers the "remove" event bound to EVERY tag input, that means: if I have 1000 files listed, my server will receive 1000 tags update requests by closing a modal.

I Tried renaming the "remove" event from your sources with no success.

If you could point me to an example of having the same result I would gladly put to the test.

Some code to clarify what I have:

I've simplified the code as the logic is much more complex and won't be of use, so please give attention to the comments: PROBLEM ...

function appendSearchResult($ctx,fileList) {

    //-- Update file tags function
    let fTags = function () {
        //-- Gather tags on input and send to server by ajax
    };

    //-- Cleanup container
    //-- PROBLEM (Calling empty will call 'remove' event on existing tagify objects)
    $ctx.find('.fileResultContainer').empty();

    //-- $html = Build HTML from fileList and parse with jQuery adding some validation events

    //-- Create events on tag inputs
    $html.find('input.fileTags').tagify().on('add', fTags).on('remove', fTags).on('edit', fTags);

    $ctx.append($html);

}

function selectFile($file) {
    //-- Gather file info and trigger callback function
    //-- Close file search modal (bootstrap 4)
    //-- PROBLEM (Calling "hide" will call 'remove' event on existing tagify objects)
    $(this).parents('.modal').modal('hide');
}

[Valkhan]

If that is the case I would suggest not using Tagify's jQuery version but to use vanilla tagify.

Why does this matter you? what the actual bug?

Digging up a little more, i found out that on "remove" is used by jQuery UI and it's triggered when an object is removed, so the Actual Bug is probably naming conflict, instead of just adding the 'remove' event from your library, it's also defining that when input is removed from dom, it should also call my function.

My request is: is there a way to make it compatible without renaming your method (some kind of ".noConflict()" solution when extending jQuery with your library) or can you point me how to rename this event to: "tagRemoved" or something like that?

[yairEO]

But have you try not to use the jQuery version of Tagify? simply use tagify.min.js

Then the on method won't be jQuery's but Tagify's on, which is a whole different events system not shared with jQuery and will probably help in your situation

[Valkhan]

could you post an example for me, i'm very newbie on vanilla js events and selectors.

[yairEO]

Just don't use the jQuery version of Tagify but the normal version. switch the files.

There are many examples in the README

I will look just like your code now, only a slight different, just follow the guides, you'll understand it in no time

[Valkhan]

Today i've taken some time to fix this on jQuery, for those who are bottered with the conflict with remove event from jQuery a simple solution is to rename the event on tagify as bellow:

From: customEventsList:["click","add","remove","invalid","input","edit"]
To: customEventsList:["click","add","removetag","invalid","input","edit"]

Find: .trigger("remove"
Replace: .trigger("removetag"

Usage:
From: $('input').on('remove', callback)
To: $('input').on('removetag', callback)

[yairEO]

you shouldn't modify the source code because I keep changing it and you will have to re-edit it every time I release a new version..

I will just make the fix in the code permanently and that's it. very soon I will releasing v3 and I will include it there (after inspection)

[yairEO]

Just released version 3.0.0. This was fixed in the process.