附加功能到动态创建的DOM元素

附加一个DOM元素与功能。（一家全球听众不希望在这里。）

问题：

我不知道如何引用新的元素在这方面。问题区域是.on事件侦听器，并且其中包含$(this)的引用。此外，功能get_value()从内部再次调用自身的能力。

相关代码：

var dom_element = (function() { 
    // [...] 
    var create = function create(data) { 
     // [...] 
     return $('<div />', { 'class': 'element', id: data.i_id }) 
      // [...] 
      .on('load', function get_value() { 
       // [...] 
       $(this).find('.value').text(s_value); 
       // [...] 
       setTimeout('get_value()', 5000); 
      }()); 
    }, 
    // [...] 
    return { 
     create: create 
    }; 
}());

来源

2012-04-16 Donnie

不通过字符串'setTimeout'，离这儿eval's他们。传递函数：'setTimeout（get_value，5000）;'。 – 2012-04-16 18:57:43

的load事件不会在<div>元素上工作。

如果要在更新div的内容时执行某些操作，应在更新内容的代码中执行此操作。

var dom_element = (function() { 
    // [...] 
    var create = function create(data) { 
     // [...] 
     var div = $('<div />', { 'class': 'element', id: data.i_id }) 
      // [...] 
     (function get_value(div) { 
      // [...] 
      $(div).find('.value').text(s_value); 
      // [...] 
      setTimeout(function() { 
       get_value(div); 
      }, 5000); 
     })(div); 

     return div; 
    }, 
    // [...] 
    return { 
     create: create 
    }; 
}());

我更新了代码，以执行我认为您要查找的内容。

来源

2012-04-16 18:58:10

他也可以使用'突变事件'。（是的，我知道他们已被弃用......） – gdoron 2012-04-16 19:01:37

@gdoron：什么是“突变事件”？ – 2012-04-16 19:08:56

@gdoron：对。我想我起初误解了代码的意图。好像它只是一个时间间隔的更新。 – 2012-04-16 19:09:07

事件处理程序的范围始终是元素，因此使用this您正在尽一切努力来引用从get_value创建的<div>。

但是，当您从超时中调用get_value时，它将在全局上下文中执行。因此，你需要通过它在setTimeout之前bind()的功能元素：

setTimeout(get_value.bind(this), 5000);

或者你做手工。

var el = this; 
setTimeout(function() { 
    get_value.call(el); 
}, 5000);

来源

2012-04-16 19:01:05 Bergi

如另一名委员说，在（“负荷” ... ）在这里不适用。您正在动态创建这些元素（假设在DOM已经准备就绪后），所以您应该能够立即启动超时。这里是我的看法：

var make_new = function(data){ 
    var $div = $('<div>', {'class': 'element', 'id':'element_'+data}); 
    var func = function(){ 
     // closure has formed around data, $div, and func 
     // so references to them here reference the local versions 
     // (the versions outside this immediate function block. i.e, 
     // inside this call of make_new) 
     data++; 
     $div.text($div.attr('id') + ":" + data); 
     setTimeout(func, 1000); 
    }; 
    func(); //start process rolling 
    return $div; 
};

基本上，你应该利用js闭包捕获你需要的引用。 func（）在返回div元素之前调用，但没有任何东西阻止你返回元素和func，并在稍后调用func（）。

退房的这一这里的jsfiddle：http://jsfiddle.net/gRfyH/

来源

2012-04-16 19:25:46

附加功能到动态创建的DOM元素

回答

相关问题