Javascript jQuery-在关注输入字段时运行函数

我有一个文本输入字段，当您单击一个json请求时，会在该字段上触发，并检索一些数据

$("input").focus(function(){
 var thefield = $(this);
 $.getJSON("http://www.blabla.com/bla",
    function(data){
      alert(JSON.stringify(data));  
          thefield.val('blabla');
    }
   );  
});

---

我如何才能做到这一点？这个请求只运行一次，而不是每次我关注文本字段时都运行一次？但我仍然希望在第二次、第三次等聚焦时，

数据可用。
在第一次单击时分配另一个函数，或者在alt属性中存储一些值，指示是否需要触发请求。
类似的操作将起作用：

$('input').one('focus', function() {
    // load data using ajax
    $(this).data('ajax-data', data);
});
$('input').focus(function() { $(this).val($(this).data('ajax-data')); });

//have this line outside any function to make it global:
var _globalData = "";

$("input").focus(function(){
    if ($(this).attr("focused") == "1") {
        alert("already focused before, data is: " + _globalData);
    }
    else {
        var thefield = $(this);
        $.getJSON("http://www.blabla.com/bla",
        function(data) {
            _globalData = JSON.stringify(data);
            alert(_globalData);  
            thefield.val('blabla');
            thefield.attr('focused', '1');
        });
    }
);

如果您的
输入
元素不共享相同的数据，请执行以下操作：

function loadData(field) {
    $.getJSON("http://www.blabla.com/bla",
        function(response){
            field.data("ajax-data", response).val(response);
        }
    );
};

$("input").focus(function(){
    var $this = $(this);
    if ($this.data("ajax-data")) {
        $(this).val($this.data("ajax-data"));
    } else {
        loadData($this);
    }
});

如果它们确实共享数据，则代码几乎相同，但使用共享变量，而不是使用
数据

var data = null;

function loadData(field) {
    $.getJSON("http://www.blabla.com/bla",
        function(response){
            data = response;
            field.val(response);
        }
    );
};

$("input").focus(function(){
    var $this = $(this);
    if (data) {
        $(this).val(data);
    } else {
        loadData($this);
    }
});

您还可以创建一个小型jQuery插件来处理上述任何场景，该插件还支持多个事件：

(function($){

    $.fn.loadInputData = function(options){

        var defaults = {
            url: "http://www.blabla.com/bla",
            events: "focus",
            sharedData: false
        };
        var _data = null;

        options = $.extend({}, defaults, options);

        function loadData(field){
            $.getJSON(options.url,
                function(response){
                    if (options.sharedData) {
                        _data = response;
                    } else {
                        field.data("ajax-data", response);
                    }
                    field.val(response);
                }
            );
        }

        return this.each(function(){
            var $this = $(this);
            $this.bind(options.events, function(){
                if ((options.sharedData && !_data) ||
                    (!options.sharedData && !$this.data("ajax-data")) {
                    loadData($this);
                } else {
                    $this.val(options.sharedData ? _data : $this.data("ajax-data"));
                }
            });
        })
    };
})(jQuery);

此插件的用法如下：

$("input").loadInputData({ sharedData: true });

只是为了好玩，这是公认答案的改进版本：

$('input').one('focus', function() {
    var $this = $(this);
    $.getJSON("http://www.blabla.com/bla",
        function(response){
            $this.data("ajax-data", response).val(response);
        }
    );
    $this.focus(function() { $this.val($this.data('ajax-data')); });
});

+1、对于最简单的jQuery方法（API参考），尽管您可以在常规的单击处理程序中简单地调用（但是
one（）
更简单、更简洁）…=）+1，但我更喜欢将您的方法包装在一个bind方法中，只需检查
数据是否已设置或not@ifaour，我完全同意。我在上一段代码中也做了类似的事情，以表明即使是这段代码也可以改进。@ShadowWizard:
聚焦
？您是否正在创建一个自定义属性来实现这一点？@ifaour yes，多年来一直使用纯JavaScript来实现这一点，不过如果我开始使用jQuery
数据
。@Shadow向导，或者只是将
$（this）[0]
与
document.activeElement
进行比较，可能会更好。您的示例将在所有输入元素上共享相同的数据，我不确定这是他想要的。@Marcus我假设他只有一个文本框，或者
$（“输入”）
只是一个示例，在实际代码中有
$（“#txtMyBox”）
，所以这应该不是问题。：）@影子巫师，公平点。然而，我从这里学到的一件事是，永远不要假设任何事情；）