CODEWITHSUNDEEP
javascriptjquery
Donnie
Donnie

Reputation: 6351

Attach function to dynamically created DOM element

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

Upvotes: 1

Views: 1675

Answers (3)

shu zOMG chen
shu zOMG chen

Reputation: 436

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/

Upvotes: 1

Bergi
Bergi

Reputation: 664307

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

Upvotes: 0

user1106925
user1106925

Reputation:

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.

Upvotes: 3

Related Questions