为什么jQuery.data的行为与jQuery UI options-events内部不同?

时间:2012-12-06 12:35:36

标签: javascript jquery jquery-ui properties jquery-data

我正在使用jQuery v1.8.3和jQuery UI v1.9.2。我以这种方式实现了Autocomplete小部件:

$('#input_id').autocomplete({
  create: function (event, ui) {
    // Initialize data
    $(this).data( 'custom', { property1: 'Hello', property2: { num: 1, funct: function() { ... return value } } );

    alert($(this).data('custom').property1) // Display 'Hello'
  },

  select: function(event, ui) {
    alert($(this).data('custom').property1) // Display 'Hello'
  },

  source: function(request, response) {
    alert($(this).data('custom').property1) // Display 'undefined'
    alert(this.data('custom').property1)    // I get 'TypeError: this.data is not a function'
  }
});

为什么<{em>}选项source选项undefined Hello {} {{}}}如何正确访问number选项上下文中的search属性以获取Hello

1 个答案:

答案 0 :(得分:3)

你在那里得到了未定义,因为this函数内source显然是匿名函数,而不是你在create函数中分配数据的INPUT。

使用其他方法访问source函数内的输入。

$('#input_id').autocomplete({
    create: function (event, ui) {
        // when using "this" here, you're refering to #input_id input
    },
    source: function(request, response) {
        // when using "this" here, you're refering to anonymous function
    }
});

要在源函数中访问您的数据,请使用以下命令:

 // ...
 source: function(request, response) {
     // you don't need to wrap this.element in jQuery again since it is already wrapped
     this.element.data('custom').property1
 }

演示以供将来快速参考:http://jsbin.com/ojesig/1/edit