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

【问题标题】：Attach function to dynamically created DOM element将函数附加到动态创建的 DOM 元素
【发布时间】：2012-04-17 03:25:46
【问题描述】：

目标：

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

【问题讨论】：

不要将字符串传递给setTimeout，而是evals。传递函数：setTimeout(get_value, 5000);.

标签： javascript jquery

【解决方案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
    };
}());

我更新了代码来做我认为你正在寻找的东西。

【讨论】：

他也可以使用mutation events。（是的，我知道它们已被弃用......）
@gdoron：什么是“突变事件”？
@gdoron：是的。我想我起初误解了代码的意图。好像只是间隔更新。
@Rocket。 mutation events。 Example why it's needed.

【解决方案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 闭包来捕获您需要的引用。 func() 在返回 div 元素之前被调用，但没有什么能阻止你同时返回元素和 func，然后再调用 func()。

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

【讨论】：

【解决方案3】：

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

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

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

或者您手动操作：

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

【讨论】：