Call a function as if an event called it

Question

I have the following function:

bringToFront : function () {
    "use strict";
    Desktop.appZ += 1;
    this.style.zIndex = Desktop.appZ;
}

This function get's called when certain elements are clicked:

appWindow.addEventListener("mousedown", Desktop.bringToFront, false);
appWindowParent.appendChild(appWindow);

However, if I add some elements to the DOM and click them, thus increasing their z-index, and then add another element, this element will appear behind the first elements, instead of in front of them. So when I add "appWindow" to "appWindowParent", I also want to call "bringToFront" on "appWindow". I need to do this without chaining the "bringToFront" function (i.e. without adding arguments).

Thanks!

By the way, I know I could just increase the z-index manually when I create the element, but I intend to do more things in the "bringToFront" function and I don't want to duplicate that code.

Elements are bound when the DOM is done loading. When you create new elements, you have to rebind them. It's not that hard tho. You should look into jQuery's dynamic binding. It's really awesome and easy to work with. — , Dec 31 '13 at 10:36
You might want to take a look at [this post](http://stackoverflow.com/questions/3219758/detect-changes-in-the-dom) - it is an event that can be called when the DOM is changed (when adding an element to the DOM) — Loyalar, Dec 31 '13 at 10:37
It sounds like you're looking for delegated event handlers without really knowing it. — adeneo, Dec 31 '13 at 10:38
@Loyalar I edited the post to clarify that I am adding the element to the DOM myself so I don't need to detect a DOM change. — user2872841, Dec 31 '13 at 10:41
@adeneo I looked around a bit (e.g. http://davidwalsh.name/event-delegate) but it event delegation doesn't seem to help me out in this situation. — user2872841, Dec 31 '13 at 11:10
So you're trying to execute the event handler mimmicking a click at the same time the element is added to the DOM. Explain the problem a little better, add the code for the event handler and how you insert the element. The code you've added tells us nothing ? — adeneo, Dec 31 '13 at 11:13
Right after you've appended the element, try `Desktop.bringToFront.apply(appWindow);` That would set the value of `this` to the element passed. — adeneo, Dec 31 '13 at 11:27
You could also just try `appWindow.click()` to trigger a click — adeneo, Dec 31 '13 at 11:28
apply() works! Thank you so much! Maybe you should post this as an answer in case someone has the same question and doesn't find the answer buried here in the comments. — user2872841, Dec 31 '13 at 11:30

score 1 · Accepted Answer · answered Dec 31 '13 at 11:34

1

You can use apply() to set the value of this inside the function

appWindowParent.appendChild(appWindow);
Desktop.bringToFront.apply(appWindow);

answered Dec 31 '13 at 11:34

adeneo

312,895
29
395
388

score -1 · Answer 2 · answered Dec 31 '13 at 10:37

-1

Detect by following code if a new element is inserted into dom

$(document).on('DOMNodeInserted', function(e) {
    if (e.target.id == 'someID') {

    }
});

answered Dec 31 '13 at 10:37

Manish Jangir

5,329
4
42
75

Not a jquery question – 999k Dec 31 '13 at 10:39

Call a function as if an event called it

2 Answers2