Attach events for dynamically created elements in angular 4 - javascript

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!

Related

How to add event listeners again to new elements rendered after ajax call?

I have a table with 3 action buttons and a select element, the data in the table changes after selecting an option in this select (action buttons remain the same, with different attributes values, obviously), after I "clean" (with .html("")) the table and show the new data, action buttons stop working (they preserve the same class as in the table original state), I found a few solutions but I don't know how to implement in my project, because I'm using jquery.
For example, I want to try the answer in this question, but the example he gives is pure JS, not jQuery.
possible solution
Is it really the problem that buttons preserve the same class? If it is, how to remove the event listener from the original elements? I'm using jQuery to manage click events.
Just after I posted this question I went to try out the given solution in the link of "possible solution", I copied and pasted the code after the click event handler from jQuery (you know, $(document).on("click"), etc).
Maybe this question would be useful for people who has the same problem but doesn't know exactly what to search to get a solution. I had the same issue.

how to replace HTML with jQuery but keep event bindings

this is more a strategic question than a specific one, but I think it's precisely asked so here goes:
let's say I have a page or ap that has 3 separate sections. A change on part of the form sends an ajax post to the server, and this requires a change in section two. I want to send back the re-processed HTML output of section 2, and have this replace the original state of section 2
but, section 2 has many elements that have change, click, drag etc. bindings - and from experience when I do a html replace, I lose all my bindings.
HOWEVER, this leaves me with rewriting certain things in many of the elements in section 2 individually so as not to lose the bindings.
I KNOW there's an easier approach to this, seems like a common problem. Can anyone provide me with the "aha" part of this question, and perhaps a few examples or links? I really appreciate it.
You will need to divide the problem into two sections
Handling events
This can be done using event delegation using $.on(). ie instead of registering events on the element you register on a parent which will not be removed
Ex:
$('.container').on('click', 'a', function(){
//do something
})
Handling widgets like draggable
Here I think you are out of luck because I don't see any other way than to reinitialize those widgets once the new dom elements are added
Ex:
var ct = $('.container').html('');
ct.find('li').draggable({})
You could use Event Delegation, so you don't have to re-bind.
From this ticket
In case anyone arrives here as I did looking for a quick alternative to replaceWith() that keeps attached events, it can be done using a combination of existing functions in the current API:
this:
old.replaceWith( new );
can be changed to:
old.before( new ).detach();
Both return a handle to the removed element, so depending on the use case it should be pretty simple to change.

Using jQuery with a WinJS binded element

I am creating some Windows 8 apps and I am using jQuery for alot of my event handling. The problem is that although the jQuery selectors seem to work fine for regular DOM elements, when I try to do a $('.listItem').click() event the selector does not actually work. I think it is because .listItem are elements created from the WinJS library at run-time and for some reason the jQuery does not recognize them.
Anyone know what I am doing wrong?
Thanks
Matt
List views raise their clicking through the iteminvoked event - click will no be seen for list view items.
If you have other interactive elements that are children on a list view item you can add the class win-interactive class to the element you want to see the events from.

getting dropdownchecklist working with knockoutJS

I'm trying to get dropdownchecklist jquery plugin working with ko. I've wired up custom binding handler but dropdown won't populate with options. Please check my fiddle: http://jsfiddle.net/amitava82/wMH8J/11/
Appreciate your help. Thanks!
This is because you create dropdown before binding KnockoutJS. How does this dropdown work? It creates additional divs and spans which copy the content of select and create nice looking list. After that bindings are applied and they modify the select (as they should), but dropdown is not updated, because this library is kind of static, i.e. it copies the content of select only at the time of calling.
I've updated your jsFiddle so you can see temporary fix. What I mean is that it works now, the binding is applied before creating dropdown. The only problem is that changing options field in viewModel won't affect the dropdown. What you probably need to do is to use subscribe method. You have to monitor changes to options field and if they occur you have to recreate the dropdown. That's an easy way at least.
#freakish answer will work for most static content, but for anything dynamic using templates, for example if or foreach bindings, or you need to support underlying data updates, such as more checkbox options "suddenly" becoming available, it will not work.
An example of a really simple $.button binding apply which can be used to wrap the more simple jQuery calls. It's a simple matter of adding more members to controls to make them available in bindings.
The case with jQuery Dropdown Check List is a bit tricky however, since you obviously want to use the built in options handler, but you need to run $.dropdownchecklist after the options handler has run, as it creates the DOM elements that jQuery depends on. By wrapping the built in options handler, we are always called in the correct context.
In my experience of usage (our project makes use of about 10-15 custom bindings), you'll average about 10-20 lines of actual JS. If you start ballooning into +100 lines, I find it's a good idea to refactor, and rethink. I hope this helps some :-) I've been using Knockout for a few months now at a major UI implementation project at work, I've really learned alot, and I'm amazed at this stuff.

How to keyboard down or up between dropdown "options"?

I have a custom built ajax [div] based dynamic dropdown.
I have an [input] box which; onkeyup, runs an Ajax search which returns results in divs and are drawn back in using innerHTML. These divs all have highlights onmouseover so, a typical successful search yields the following structure (pardon the semi-code):
[input]
[div id=results] //this gets overwritten contantly by my AJAX function
[div id=result1 onmouseover=highlight onclick=input.value=result1]
[div id=result2 onmouseover=highlight onclick=input.value=result2]
[div id=result2 onmouseover=highlight onclick=input.value=result2]
[/div]
It works.
However, I'm missing the important functions behind regular HTML elements. I can't keyboard down or up between "options".
I know javascript handles keyboard events but; I haven't been able to find a good guide. (Of course, the follow-up question will end up being: can I use <ENTER> to trigger that onclick event?)
What you need to do is attach event listeners to the div with id="results". You can do this by adding onkeyup, onkeydown, etc. attributes to the div when you create it or you can attach these using JavaScript.
My recommendation would be that you use an AJAX library like YUI, jQuery, Prototype, etc. for two reasons:
It sounds like you are trying to create an Auto Complete control which is something most AJAX libaries should provide. If you can use an existing component you'll save yourself a lot of time.
Even if you don't want to use the control provided by a library, all libraries provide event libraries that help to hide the differences between the event APIs provided by different browsers.
Forget addEvent, use Yahoo!’s Event Utility provides a good summary of what an event library should provide for you. I'm pretty sure that the event libraries provided by jQuery, Prototype, et. al. provide similar features.
If that article goes over your head have a look at this documentation first and then re-read the original article (I found the article made much more sense after I'd used the event library).
A couple of other things:
Using JavaScript gives you much more control than writing onkeyup etc. attributes into your HTML. Unless you want to do something really simple I would use JavaScript.
If you write your own code to handle keyboard events a good key code reference is really handy.
Off the top of my head, I would think that you'd need to maintain some form of a data structure in the JavaScript that reflects the items in the current dropdown list. You'd also need a reference to the currently active/selected item.
Each time keyup or keydown is fired, update the reference to the active/selected item in the data structure. To provide highlighting information on the UI, add or remove a class name that is styled via CSS based on if the item is active/selected or not.
Also, this isn't a biggy, but innerHTML is not really standard (look into createTextNode(), createElement(), and appendChild() for standard ways of creating data). You may also want to see about attaching event handlers in the JavaScript rather than doing so in an HTML attribute.

Categories

Resources