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

Question

Goal:

Append a DOM element with functionality. (One global listener is not desire here.)

Problem:

I don't know how to reference the new element in this context. The problem area is the .on event listener and the references to $(this) contained inside. Also, the ability for the function get_value() to call itself again from within.

Relevant Code:

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

The load event won't work on a <div> element.

If you want to perform some action when the content of the div is updated, you should do so in the code that updates the content.

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

I updated the code to do what I assume you're looking for.

Answer 2

As another had said, on.('load'...) doesn't apply here. You're creating these elements dynamically (presumably after the DOM is all ready) so you should be able to start the timeouts right away. Here's my take:

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

Basically, you should take advantage of js closures to capture the references that you need. func() is called before returning the div element, but there's nothing stopping you from returning both the element and func, and calling func() later.

Check out the jsfiddle of this here: http://jsfiddle.net/gRfyH/

Answer 3

The scope of a event handler is always the element, so using this you're doing everything right to reference the created <div> from get_value .

Yet, when you call get_value from the timeout, it will be executed in the global context. So you need to bind() the function to the element before passing it in setTimeout :

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

Or you do it manually:

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