Develop Reference

Attach events for dynamically created elements in angular 4

I want to create miller columns in angular 4. It can have any level of columns based on the input. And items from one column can be dragged and dropped in other columns.
My problem is attaching events for dynamically created elements in angular4. Like below code in jquery
$('.parentConstantDiv').on('click','.dynamicallyCreatedDiv',function(){
//Some task here
})
I could have used angular renderer but it allows to attach events only to window, document and body. But thats not jQuery handler mentioned above does.
Can someone help me to create handler like jQuery handler mentioned above in angular 4 component.
I got this pure java script method answer, but events are not removed when element is deleted from DOM.

Though I did not find exact answer to replicate the jQuery code in the question, I got something similar solution using this dynamic dom adding method.
Posting this answer so it might help someone else. Cheers!

javascript custom event bind delegation like jQuery.on()

I am trying to imitate jQuery.on("click", ".target", handler) by utilizing addEventListener() method. My research on Stackoverflow end up with this: Native addEventListener with selector like .on() in jQuery.
So, before some one mark my question as DUPLICATE please read carefully my requirements and my demo.
Here is my Plunker demo https://plnkr.co/edit/so8Sur?p=preview ( I am running chrome when testing it ). Following is the explanation for it:
At purple box which is "jQuery way" is running as my expectation which should be show Message popup no matter i am clicking on .target box or it children which is .target-child.
But for green box which is my custom event binding, with custom function: customOn(selector, type, filter, handler), it will only show popup when click on .target box only, but it will not show popup when i click on .target-child.
So, my question is, I wonder what kind of magic used by jQuery to make event to be triggered when click on the .target-child on my demo, while the actual selector filter is .target. Will jQuery traverse up on DOM trees to check any selector match every time it needs to handle delegated event? If yes, i feel it will take enough computation resource ( maybe RAM ), is that right? I hope there will be much efficient way rather than doing traverse up like that.
Any answer and comment will be highly appreciated. Thanks in advance.

Jquery use css selectors as crawling system.
So if you click on something, it will "crawl" the parents until it match (or not) the target.

Can't modify properties of element using jquery .on()

I'm currently trying to write what I feel like should be a very simple chrome addon using jquery. I have a tool I use for work that our IT department has stopped supporting Chrome with, because they have enough on their plate troubleshooting IE. Their solution however, was simply to remove the old onClick functions and added the property disabled="diabled" to all of our buttons.
My simple work around for this is using jquery to remove the disabled properly and append the onClick functionality. I've gotten this to work in a few instances, but the problem I'm running into is with new instances of buttons created using ajax forms.
Here's the code I'm currently trying to work with:
function restoreFunctionality() {
$("#RestoreDefaultsButton").removeProp("disabled").attr("onClick", "OnRestoreDeviceClientClick()");
}
RestoreFunctionality();
Now, this works fine for the initial load, however I'd also like this to work for every button that is to be created in the future. To do this, I added:
$("#RestoreDefaultsButton").on("restoreFunctionality", function(event) {
$("#RestoreDefaultsButton").removeProp("disabled").attr("onClick", "OnRestoreDeviceClientClick()");
});
This, however, does not work for me but also does not provide any sort of console error message telling me why it won't work. I can't seem to find an example of what I want. I see examples in the jquery doc where it can be called by clicking somewhere or something like that, however what I want is for it to just simply "work". Just look for new instances of that button ID and make the changes.
Is on() not the function I want to use in jquery 1.11.1? Am I somehow using this incorrectly? Any guidance to point me in the right direction would help.
Edit for clarification:
I am not trying to edit the same button multiple times in multiple locations. I am trying and willing to create code individually for each button that comes up, given I know the ID of each one.
Here is an example of something I have that is currently working:
The line of code for the button reads:
<input type="button" name="RestoreDefaultsButton" value="Submit"
id="RestoreDefaultsButton" disabled="disabled" class="aspNetDisabled InlineButtonStyle">
The code that I am using and that actually works just fine is now:
$("body").on("click", "#RestoreDefaultsButton", restoreDefaultFunctionality());
and restoreDefaultFunctionality() is simply:
$("#RestoreDefaultsButton").removeProp("disabled").attr("onClick", "OnRestoreDeviceClientClick()");
Again, the above code works just fine. What I seem to have trouble with is that not all of my buttons are present on load, I may click a link that loads a model on the same page/url with a form that has additional buttons. That button might read:
<input type="button" name="OpenToolkitButton" value="Submit" id="OpenToolkitButton" disabled="disabled" class="aspNetDisabled InlineButtonStyle">
Which is almost exactly the same as the original example, it's just been loaded after the script ran for the first time.
What I am looking for is a solution to make all individually specified buttons that I need, when they occur, to have that disabled removed and a specific onclick function added.

It appears that you have several things wrong and you are using .on() incorrectly.
First, ids in your document must be unique. You cannot have multiple DOM elements with the same id. That is both illegal HTML and will not correctly work with selectors. So, if you're trying to detect future "#RestoreDefaultsButton" objects in addition to the one you already have, you will have to change that because you can't have more than one and still have selector code work correctly. Usually, you want to use a class name instead of an id when you want to find multiple objects of the same type.
Second, your use of .on() is simply not correct. .on() allows you to register a callback function that will be called when a certain DOM event is triggered. So, when you do this:
$("#RestoreDefaultsButton").on("restoreFunctionality", fn);
You are asking for jQuery to call your function when the single "#RestoreDefaultsButton" object triggers the "restoreFunctionality" DOM event. Since "restoreFunctionality" is not a built-in DOM event, the only way that could ever trigger is if you triggered the event yourself.
The usual solution to modifying newly created objects that are inserted into the DOM is to go find the code that creates those objects and insert a function call (to call your own function that can find and "patch up" the newly created DOM objects right AFTER the newly created DOM objects have been created.
The newest browser versions allow you to register a callback to be notified when certain types of objects are added to the DOM so you could get notified automatically. These notifications are call MutationObservers (doc here). Unfortunately, those events are only implemented in the latest browsers (IE11) so you generally can't solely rely on them for a general web page.
Your click handler assignment could probably be solved with delegated event handling. In delegated event handling for dynamically created objects, you find a persistent object (that is not dynamically created) that will be in the parent chain of your dynamically created element and you bind the click event handler to that parent. Since click events "bubble" up the parent chain, the click event will be seen by the parent. Using the delegated form of .on() that works like this:
$("static parent selector").on("click", "dynamic element selector", fn);
You can then handle the event without worrying about the timing of when the dynamic element is created/destroyed, etc...
You can read more about delegated event handling in these references:
Does jQuery.on() work for elements that are added after the event handler is created?
jQuery .live() vs .on() method for adding a click event after loading dynamic html
jQuery .on does not work but .live does

Are you triggering the "restoreFunctionality" event after your ajax forms are built?
$("#RestoreDefaultsButton").trigger("restoreFunctionality");
Forces it to be synchronous if you have more to do after the call and before you finish the function
$("#RestoreDefaultsButton").triggerHandler("restoreFunctionality");

oop in javascript binding dom elements to objects

Hi I really could do with a point in the right direction with this question.
I'm trying to fathom object orientated javascript, but am having trouble getting my head around binding dom elements to objects.
I would like to make a little animated widget type thing for my web page. the widget will be just simple drop down tabs , (like tabs from an actual folder) I want the tab to drop down a bit with a mouseover event then raise up with mouseout.
here is my current implementation, it doesnt work well at the moment it's just a mock up
http://bombinglish.com/
I want to make a class for the tabs , which will include the open and close animation methods, methos to add events, and other necessary fields. then instanciate a new object for each tab. but how do I do I tell each object that it must must respond to the corresponding mouse events, or to put it another way how do I bind the DOM element to the object?

If you are using Javascript just for presentation logic, then I don't think it's worth anything to try and get wild with OO.
If you have that at the top of every page, you could simply label the tabs with a unique class name. Then in your Javascript file you bind a mouseover event on every DOM element with that class name.
Perhaps, others have differing opinions on this however.

Jquery plugin menu - bind or live

I'm learning how to do my own Jquery plugin and I'm starting with some basic stuff.
You can see my fiddle here: http://jsfiddle.net/denislexic/8YBM6/8/
This needs to be binded, ie, some of the time the elements will be AJAX loaded, so the plugin still needs to work. (in the fiddle I added a button that copies the content, so I could test it out, but no luck...)
I usually just do live or on. I'm trying to learn and understand.
Thanks

Here's an updated fiddle: http://jsfiddle.net/aR8RQ/1/
Changes I made include:
I'm using event delegation for the 'avatars' element(s). Previously the events were binded using .each() which would have only binded the events on the initial call for the plugin.
I'm using .data() to store the state of the menu (whether it's open or close) and added some event bindings on the document to handle closing the menu.
I added comments to hopefully help you out! I think this does everything you originally asked for (for instance: hiding the menu if you click on anything other than that). There's still some work you can do (for instance, when you "duplicate" you can handle the "close" method for your menus more gracefully!)
Hopefully this helps! :)