將函數附加到動態創建的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);