将函数附加到动态创建的DOM元素

Question

目标：

附加具有功能的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
    };
}());

Answer 1

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

我更新了代码以执行假设您要查找的操作。

Answer 2

正如另一个人所说，on。（'load'...）在这里不适用。 您正在动态创建这些元素（大概是在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闭包来捕获所需的引用。 在返回div元素之前会先调用func（），但是没有什么阻止您同时返回该元素和func，并稍后再调用func（）。

在这里查看jsfiddle： http ： //jsfiddle.net/gRfyH/

Answer 3

事件处理程序的范围始终是元素，因此使用this您将做一切正确的事情，以引用get_value创建的<div> 。

但是，当您从超时中调用get_value时，它将在全局上下文中执行。 因此，您需要在setTimeout传递函数之前将函数bind()到元素：

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

或您手动进行：

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