jQuery - Run a function after .load() is complete AND DOM is updated

I'm trying to run a function on an object that is loaded into the DOM when the user clicks on the menu. Here is some part of my code:

$('#menu li a').click(function(){  
            var toLoad = $(this).attr('href');
            //...

            var $newItem = $('<li></li>').appendTo($(columns).first());

            loadContent();
            function loadContent() {
                $newItem.load(toLoad, runScript());
            }

            function runScript() {
                //see the code in IE9's debugger
                alert($newItem.get(0).outerHTML);
                obj.doWidget($newItem.get(0));
            }

            return false;
        });

The problem is, when I click on the menu item, the alert function in the above code, shows the code before loading: <li></li> and not the loaded element from the object itself hence the script changes the old object and the new object overwrites its content. (like I've never ran the script). I assumed that the fallback function should implement return the loaded object. How can I get that object? Thanks.

Answers


Pass a reference to runScript not the results of executing the function:

$newItem.load(toLoad, runScript);

Need Your Help

for in loop and the delete operator

javascript

I noticed that when enumerating the properties of an object, that it seems like a snapshot of the current properties is taken at start of the loop, and then the snapshot is iterated. I feel this way

Python is not saving .pyc files in filesystem

python linux

I have a python application running in an embedded Linux system. I have realized that the python interpreter is not saving the compiled .pyc files in the filesystem for the imported modules by defa...