Question

我有一个HTML控件列表，我需要将keyup事件的监听器绑定到每个控件。一旦触发，其他一些行动应该在延迟一段时间后启动。我正在使用setTimeout。

$(".TextBoxClass").each(function () {
  $(this).keyup(function () {
    alert("Id = " + $(this));    
    setTimeout(function () { 
       alert("current Id = " + $(this))
    }, 50);
  })
})

第一条alert消息显示触发id事件的控件的正确keyup。 alert中的第二个setTimeout表示current id = [object][object]。

如何在setTimeout回调函数中访问控件？

Answer 1

'this'标识符超出了setTimeout方法内的范围。尝试将对象引用存储在变量中并在setTimeout方法中使用，如本示例所示......

$(".TextBoxClass").each(function(){
    var obj = $(this);

    $(this).keyup(function () {
        alert("Id = "+ obj); 
        setTimeout(function(){ 
            alert("current Id = " + obj)}, 50);
    });
});

Answer 2

为什么不在这里处理事件功能时只使用事件对象。

$(".TextBoxClass").each(function () {
    $(this).keyup(function (e) {
        alert(e.target);
        setTimeout(function () {
            alert(e.target);
        }, 50);
    });
});

查看jQuery event object上的文档。

Answer 3

this关键字的值取决于您的功能范围。在外部函数范围中，this是触发事件的DOM元素。在setTimeout范围内，它是全局window对象。在外部函数范围中存储对DOM元素的引用，并在稍后警告ID时使用它：

$(".TextBoxClass").keyup(function () {
    var self = this;
    alert("Id = " + self.id);
    setTimeout(function() {
        alert("current Id = " + self.id)
    },50);
});

此外，没有理由进行任何迭代。 keyup可以同时绑定到所有元素。

Answer 4

  <div id="controls">
    <input class="TextBoxClass" type="text" value="1" id="id-1">
    <input class="TextBoxClass" type="text" value="2" id="id-2">
    <input class="TextBoxClass" type="text" value="3" id="id-3">
    <input class="TextBoxClass" type="text" value="4" id="id-4">
    <input class="TextBoxClass" type="text" value="5" id="id-5">
  </div>


$('#controls').on('keyup', '.TextBoxClass', function () {
  var $this = $(this);

  setTimeout(function(){ 
    // alert("current value = " + $this.val()); 
    alert("current element id = " + $this.attr('id')); 
  }, 50);
});

http://jsbin.com/yisore/1/

http://jsbin.com/yisore/1/edit

如何在setTimeout（）函数中使用$（this）访问asp控件

4 个答案: