1

目标：

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

3 回答 3

3

该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-16T18:58:10.960 回答
1

正如另一个人所说， 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 闭包来捕获您需要的引用。func() 在返回 div 元素之前被调用，但是没有什么能阻止你返回元素和 func，然后再调用 func()。

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

于 2012-04-16T19:25:46.733 回答
0

事件处理程序的范围始终是元素，因此使用this您正在做所有正确的事情来引用 created <div>from get_value。

然而，当您get_value从超时调用时，它将在全局上下文中执行。因此，您需要bind()先将函数传递给元素，然后再将其传递setTimeout：

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

或者您手动执行：

var el = this;
setTimeout(function() {
    get_value.call(el);
}, 5000);
于 2012-04-16T19:01:05.237 回答