JQueryのUIとイベント処理

Question

私はdivに接続し、その中の特定のコントロール（オプションで設定）を聞くjQuery UIウィジェットを持っています。問題は、私のイベントリスナーで、これはウィジェットがアタッチされている要素ではなく、変更されたコントロールを指していることです。どうすればウィジェットの要素にアクセスできますか？

_addressChanged: function() { 
     $(this).data("address").requiresValidation = true; 
    }, 

    _bindEventHandlers: function() { 
     $(this.options.address1).bind("change", this._addressChanged); 
     $(this.options.address2).bind("change", this._addressChanged); 
     $(this.options.city).bind("change", this._addressChanged); 
     $(this.options.zip).bind("change", this._addressChanged); 
    }, 

Answer 1

this.elementを試しましたか？ http://wiki.jqueryui.com/w/page/12138135/Widget%20factoryから

：

this.element

プラグインをインスタンス化するために使用された要素。たとえば、$("#foo").myWidget()を実行する場合、ウィジェットインスタンスthis.elementの中には、idがfooの要素を含むjQueryオブジェクトがあります。複数の要素を選択してコレクション上で.myWidget()を呼び出すと、各要素に対して個別のプラグインインスタンスがインスタンス化されます。つまり、this.elementは常に1つの要素を含むことになります。

Answer 2

ハンドラをバインドするのにthis._on() methodを使用してください。このメソッドはjQuery UIウィジェットファクトリによって提供され、ハンドラ関数内でthisが常にウィジェットインスタンスを参照するようにします。

_bindEventHandlers: function() { 
    this._on(this.options.address1, { 
     change: "_addressChanged" // Note: pass the function name as a string! 
    }); 
    ... 
}, 
_addressChanged: function (event) { 
    // 'this' is now the widget instance. 
    // 'this.element', as suggested by sjsharktank, is the DOM element the widget was created on 
},