如何从原始元素中删除引导程序标签输入事件

Question

In bootstrap-tagsinput there is a functionality to bind events to the original element(input element).

ex :

$('input').on('beforeItemRemove', function(event) {
   // event.item: contains the item
   // event.cancel: set to true to prevent the item getting removed
});

But if I destroy the tagsinput and initialize it again like below,

$('input').tagsinput('destroy');
$('input').tagsinput();

beforeItemRemove event will fire 2 times. If I remove the tagsinput functionality again and initialize again. When I remove another tag beforeItemRemove will fire 3 times. This keeps happening when I remove and add the tagsinput functionality.

Why is this happening?

Answer 1

try using delegate

$(document).on('beforeItemRemove', 'input', function(event) {
   // event.item: contains the item
   // event.cancel: set to true to prevent the item getting removed
});

though, I just went to the link you provided, attached your handler in the developer console and destroy / initialzer and it only fired once for me. Therefore it could be something else in your code which is causing you the issue.

Answer 2

Based on the other comments and answers I found a way to avoid this behavior. I edited the Destroy function.

/**
 * Removes all tagsinput behaviour and unregsiter all event handlers
 */
destroy: function() {
  var self = this;

  // Unbind events
  self.$container.off('keypress', 'input');
  self.$container.off('click', '[role=remove]');

    // unbind the additional events

    self.$element.off('itemAdded');
    self.$element.off('beforeItemAdd');   
    self.$element.off('itemRemoved');     
    self.$element.off('beforeItemRemove');    

  self.$container.remove();
  self.$element.removeData('tagsinput');
  self.$element.show();
},