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.