jQuery UI小工具鼠标事件是否处于小工具状态？
提问于 2012-03-14 15:48:54
使用jQuery UI小部件工厂模式(1.8)，在鼠标事件中查找小部件对象本身时遇到了问题：
$.widget('foo.myWidget', {
_create: function() {
var $container = this.element.wrap('<div class="ui-widget" />').parent(); // Create a widget container
$container.append('<div class="myWidgetControl" />'); // Add some clickable thing
$container.find('.myWidgetControl').on('mouseup.myWidget', this._handleClick); // Watch the mouse event
},
options: { // Widget factory options object
secretKey: 'foobar'
},
_handleClick: function(e) {
// User clicked on ".myWidgetControl"
// this == DOM element .myWidgetControl
// e == the jQuery event object
// I need to get options.secretKey; how do I find it?!?
}
});在上面的示例中，如何获取"secretKey“选项参数？假设页面上可能有这个小部件的多个实例，那么如何获得用户单击的控件元素的正确实例呢？
' widget‘方法added in 1.8看起来可能是一个解决方案，但它需要知道用户最初将该widget应用于哪个元素：
$("#myDiv").myWidget("widget");在这种情况下，如何找出用户最初为该小部件实例(示例中的“#myDiv”)设置的选择器是什么？
回答 1
Stack Overflow用户
发布于 2012-03-14 16:46:32
在this blog post上找到了一个解决方案(不过，这个问题还有待解决，看看是否有更好的方法)：
作为小部件开发人员，我知道容器元素是什么；因此，使用jQuery Data cache保存对小部件的引用，以便以后可以找到它：
_create: function() {
/* existing code */
var $container = this.element.wrap('<div class="ui-widget" />').parent();
$container.data('widget', this); // Save for later
},
_handleClick: function(e) {
var $container = $(this).parentsUntil('.ui-widget').parent(); // Traverse the tree to find the root element I saved the data for
var widget = $container.data('widget');
alert(widget.options.secretKey); // Success! (Don't actually display your secretKey in an alert...)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9705270
复制相关文章
腾讯云开发者
