擴展jQuery UI小部件 - 覆蓋父項事件？

Question

我正試圖擴展jQuery UI Autocomplete小部件。在我的自定義小部件中，我需要能夠覆蓋select事件，同時理想情況下也允許小部件的用戶將其自己的處理程序附加到該事件。

這裏是我的嘗試之一的的jsfiddle：http://jsfiddle.net/nN46R/

我第一次嘗試（這是在的jsfiddle）是綁定到事件_create：

$.widget("custom.myautocomplete", $.ui.autocomplete, { 
    _create: function() { 
     this._super("_create"); 

     // Doesn't work 
     this.element.bind('autocompleteselect', function() { 
      alert('Handling autocompleteselect!'); 
     }); 
    } 
}); 

這沒有奏效。它將觸發如果你改變autocompleteselect到select，但只有當你突出顯示文本框內的任何文本 - 但這只是jQuery的select處理程序觸發，而不是jQuery UI的autocompleteselect。不是我想要的。

每this post，我試圖定義窗口小部件內的_select方法：

$.widget("custom.myautocomplete", $.ui.autocomplete, { 
    _create: function() { 
     this._super("_create"); 
    }, 
    _select: function (event, ui) { 
     alert('Handling select!'); 
    } 
}); 

這也沒有工作。我只用select（沒有下劃線）嘗試，但沒有運氣。

是工作的唯一的事情就是用options陣列中的默認處理程序通過，像這樣（jsfiddle）：

$.widget("custom.myautocomplete", $.ui.autocomplete, { 
    options: { 
     select: function (event, ui) { 
      alert('Handling select!'); 
     } 
    } 
}); 

但是，這有幾個問題。首先，它看起來並不像它可以調用自定義窗口小部件的任何其他方法在處理程序中：

$.widget("custom.myautocomplete", $.ui.autocomplete, { 
    options: { 
     select: function (event, ui) { 
      alert('Handling select!'); 

      // Doesn't work: 
      // Uncaught TypeError: Object #<HTMLInputElement> has no method '_myCustomSelectHandler' 
      this._myCustomSelectHandler(); 
     } 
    }, 
    _myCustomSelectHandler: function (event, ui) { 
     alert('In _myCustomSelectHandler!'); 
    } 
}); 

其次，如果用戶定義自己select處理程序，那麼該礦將不再觸發：

$("#tags").myautocomplete({ 
    delay: 0, 
    source: availableTags, 
    select: function (e, ui) { 
     alert("Muahaha! Me (the user) just overrode the select handler, and now yours won't get called!"); 
    } 
}); 

因此，這看起來並不像一個解決方案。

那麼，有什麼辦法可以擴展自動填充小部件並覆蓋select處理程序？

Answer 1

想通了！在第一個代碼示例，我不得不做的是綁定到myautocompleteselect事件，而不是autocompleteselect：

http://jsfiddle.net/nN46R/1/

$.widget("custom.myautocomplete", $.ui.autocomplete, { 
    _create: function() { 
     this._super("_create"); 

     // Works! Bind to the "myautocompleteselect" event, not 
     // "autocompleteselect". 
     this.element.bind('myautocompleteselect', function() { 
      alert('Something selected!'); 
     }); 
    } 
}); 

顯然，這被引發該事件的全名是小工具的名稱與事件名稱（select）連接。這是一個自定義小部件，因此您應該使用自定義小部件的名稱，在我的示例中爲myautocomplete。

作爲一個方面說明，如果它們想要綁定到代碼中的任何事件（如自動完成菜單打開或關閉），則這也與小部件用戶相關。如果這是基本自動完成構件，他們將使用綁定到菜單開幕活動：

$('#tags').bind('autocompleteopen', function(event, ui) { 
    console.log('autocomplete menu opening'); 
}); 

但是，如果他們使用的自定義部件myautocomplete（延伸autocomplete），他們將需要綁定到myautocompleteopen事件代替：

$('#tags').bind('myautocompleteopen', function(event, ui) { 
    console.log('custom autocomplete menu opening'); 
}); 

jQuery UI小部件事件的事件名稱是命名空間 - 重要的是牢記！