javascript - 为什么 jQuery.data 的行为与 jQuery UI 选项事件内部不同？

Question

我正在使用 jQuery v1.8.3 和 jQuery UI v1.9.2。我以这种方式实现了自动完成小部件：

$('#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'
  }
});

为什么在我获得的source选项和我获得undefined的事件中？我应该如何正确访问选项上下文中的属性以便获取？createselectHellonumbersearchHello

Answer 1

你在那里变得未定义，因为显然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