如何從原始元素中刪除引導程序標簽輸入事件

Question

bootstrap-tagsinput中提供了將事件綁定到原始元素（輸入元素）的功能。

例如：

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

但是，如果我destroy了tagsinput並像下面那樣再次tagsinput進行初始化，

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

beforeItemRemove事件將觸發2次。 如果我再次刪除了tagsinput功能，然后再次初始化。 當我刪除另一個標簽之前， beforeItemRemove將觸發3次。 當我刪除並添加標簽輸入功能時，這種情況一直在發生。

為什么會這樣呢？

Answer 1

嘗試使用delegate

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

不過，我只是轉到您提供的鏈接，將您的處理程序附加到開發人員控制台中，然后destroy / initialzer ，它只為我觸發一次。 因此，可能是代碼中的其他內容導致了問題。

Answer 2

根據其他評論和答案，我找到了避免這種現象的方法。 我編輯了Destroy功能。

/**
 * 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();
},