jQuery的 - 專注於一個輸入字段

我有一個文本輸入框，當你點擊一個JSON請求火上關閉時，有些數據被檢索到的運行功能。jQuery的 - 專注於一個輸入字段

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

我該怎麼做，所以這個請求只能運行一次，而不是每次我專注於文本字段？但我還是想data當我專注於第二，第三時間等

來源

2011-01-09 Alex

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

可用

來源

2011-01-09 14:23:34 roman

+1，用於最簡單的jQuery方法（[`one（）`]（http://api.jquery.com/one/）的API參考），儘管您可以在常規的點擊處理程序中調用[ `'（http://api.jquery.com/unbind/）（但是`one（）`是**方式**更簡單更簡潔）... =） – 2011-01-09 14:25:35

美麗，謝謝你：P – Alex 2011-01-09 14:26:24

+1，但我更喜歡用一種綁定方法來包裝你的方法，並簡單地檢查'數據'是否設置 – ifaour 2011-01-09 14:28:15

指定其他功能上的第一次點擊或存儲在alt屬性值的一些指示是否需要火的請求或不

來源

2011-01-09 14:23:17 simon

像這樣的事情會做的伎倆：

//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'); 
     }); 
    } 
);

來源

2011-01-09 14:26:28

如果您input元素不共享相同的數據做到這一點：

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); 
    } 
});

如果他們這樣做共享數據，這幾乎是相同的代碼，但是有一個共享變量，而不是使用data。

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

來源

2011-01-09 14:36:21 mekwall

jQuery的 - 專注於一個輸入字段

回答

相關問題