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您可以正确地从<div>引用创建的get_value。

然而，当您从超时调用get_value时，它将在全局上下文中执行。因此，在setTimeout：

中传递元素之前，您需要bind()该元素的函数

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

或者您手动执行：

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

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

3 个答案: