代码之家 › 专栏 › 技术社区 › thaddeusmt

在jquery live/delegate中获取“this”元素ID,超时

jquery binding javascript

0

thaddeusmt · 技术社区 · 15 年前

我正在尝试获取用jquery delegate()函数绑定的元素的ID。我想将元素的ID传递给另一个函数。返回的ID总是“未定义”的,我不知道为什么。这是我的代码:

$(document).ready(function() {
  var timeout = undefined;
  $('body').delegate(
    '#tab-form input[type="text"]',
    'keypress',
    function(){
      if(timeout != undefined) {
        clearTimeout(timeout);
      }
      timeout = setTimeout(function() {
        timeout = undefined;
        alert($(this).attr('id'));
      }, 500);
    }
  );
});

我的标记:

<form id="tab-form">
  <input type="text" value="" id="Tab_name" name="Tab[name]">
  <input type="text" value="" id="Tab_text" name="Tab[text]">
</form>

在文本输入中按下一个键会弹出一个JS警报,它会像我想象的那样说“未定义”,而不是“制表符名称”或“制表符文本”。

我最初的谷歌搜索让我相信ATTR(‘ID’)的原因是 未定义 “this”实际上不是单个dom元素,而是delegate()附加到的元素数组。我还不知道如何访问 现在的 jquery对象数组中绑定元素的dom对象。

非常感谢您的帮助!

4 回复 | 直到 15 年前

1

0

meder omuraliev 15 年前

语境是 window 因为 窗口 拥有 setTimeout . 只是缓存它:

$(document).ready(function() {
  var timeout = undefined;
  $('body').delegate(
    '#tab-form input[type="text"]',
    'keypress',
    function(){
      var el = this;
      if(timeout != undefined) {
        clearTimeout(timeout);
      }
      timeout = setTimeout(function() {
        timeout = undefined;
        alert($(el).attr('id'));
      }, 500);
    }
  );
});

2

Nick Craver 15 年前

那是因为 this 这不是你想要的匿名函数,而是 window . 有几种方法可以解决这个问题,例如使用 $.proxy() ,像这样:

  timeout = setTimeout($.proxy(function() {
    timeout = undefined;
    alert(this.id);
  }, this), 500);

3

0

jAndy 15 年前

meder 已经指出了行为的原因。你也可以通过 event object 使用 target :

$(document).ready(function() {
  var timeout = undefined;
  $('body').delegate(
    '#tab-form input[type="text"]',
    'keypress',
     function(event){
        if(timeout != undefined) {
           clearTimeout(timeout);
        }
        timeout = setTimeout(function() {
           timeout = undefined;
           alert($(event.target).attr('id'));
     }, 500);
   }
 );
});

旁注:使用 .delegate() 在document.body上根本没有意义。你可以把这些事件和 .live() 你的元素。

4

0

user113716 15 年前

既然有其他选择,我会给你 closure 选择权。o)

(function( th ) {
  timeout = setTimeout(function() {
    timeout = undefined;
    alert(th.id);
  }, 500);
})( this );

编辑: 为了解释正在发生的事情,基本上你正在创建一个函数,调用这个函数并传入 this 同时作为函数的参数。

这样想:

  // Create a new function that accepts one argument
function myFunc( th ) {
  timeout = setTimeout(function() {
    timeout = undefined;
    alert(th.id);
  }, 500);
}

  // Immediately call the function, and pass "this" in to it
myFunc( this );

这完全一样。拿着这个,把整个函数包装起来 () ,通过删除函数名使其匿名 myFunc ,然后取执行运算符 ( this ) 从函数调用,并将其直接放在函数后面。

当你这样做的时候,你基本上 打电话 创建函数之后。这只是立即执行未命名(匿名)函数的简单方法。