I referred so many references, but not getting any responses. Thats y i came here to develop my code through yours.
Have to append the element with the text on click. It works and appends inside the ul element as li element with text. But i want to disable or stop the child event. Since i wrote the onclick on parent element only. It should not be click able on the child element. Please help on this.
Sharing the url :
https://stackblitz.com/edit/angular-hostbinding-decorator
I have studied your code and found the problem. The ul is the parent element and must be referenced by abcd and the click handler on first li that is responsible for adding child receives the event.
<div hostbinding color="white">{{name}}</div>
<h1>Hello {{thingTwo}}</h1>
<ul #abcd>
<li (click) = "dasdas($event)" >Click here to add li</li>
</ul>
Related
I have a simple form, where I want to be able to remove DOM elements, that I might not need (eg. questions on a form).
This works only for the first element. After the first element is removed (clicked) it will be removed but then all further clicks are not registered.
The console will only display the first "click" as well.
I am using handlebars to generate some of the DOM elements in a loop, not sure if that would actually cause a issue, since I am able to see the elements in chrome inspector.
JS FUNCTION
let allItems = document.getElementById("main");
allItems.addEventListener("click",function(e){
console.log("click");
e.target.parentElement.remove();
e.preventDefault();
});
HTML -- HandleBars.
{{#each all}}
<div id="main">
<p class="delete">✘</p>
<span class="select">
<select>
<option value="0"></option>Selection</option>
</select>
</span>
</div>
{{/each}}
You've got two problems here:
you are assigning the same id to multiple elements, this is invalid html as id's are supposed to be unique.
This is a very common problem in javascript. the code only binds event listeners on the elements that were present in the page at the time the code ran. any newly added elements won't be present. the solution in this scenario is to remove the event listeners off the elements, and add a single listener on the document for click, then check the event target to see if it is one of the nodes you want.
I recommend to remove id of main from the elements, and give them all an identical class ie class="removable-form-item", then use a global click listener like so:
document.body.addEventListener('click',function(event){
if(event.target.classList.contains("removable-form-item")){
//got a click on our target name
// your code to remove the item here
e.target.parentElement.remove();
e.preventDefault();
}
});
I have a HTML where more that one element is active.
`document.activeElement `
returns the first one, but I need to find the second element which is in focus.
sample code as follows.
`<ul Class="ul1" Active="true">
<!-- some tags-->
<ul class="ul2">
<li Active="true">My Element</li>
</ul>
</ul>`
I need to find My Element in the above code which is dynamic(Some tags part will have different combination of tags), also position of li in UL2 will vary.
Please help to get the second element with javascript.
document.querySelectorAll('[Active="true"] [Active="true"]')
this will select every active child of every active element. Sadly, though it will also select the 3rd, 4th... nth child.
So if you have any other way to differentiate which one is the 2nd one, then the task will be much simpler.
If it makes any difference - the very fist element in the returned array will be what you need. but If you have several "2nd active children" you want to select - then you'll have no luck.
also:
document.querySelector('[Active="true"] [Active="true"]')
will return the first match, which is an active child of an active element.
I have following type of code
<div id="parent-div">
<div id="child-div">
<!--content goes here -->
</div>
</div>
The child div comes from third party service it will get attached or removed dynamically. How to fire a javascript event during attaching the are removing the div
if you are using jquery use
.trigger(),
in the function or code you attach the child div, after attaching the child div put
$("div#parent-div").trigger("child_div_attached");
in the function or code you remove the child div, after removing the child div put
$("div#parent-div").trigger("child_div_removed");
then you can add event listener to parent div like,
$("div#parent-div").on("child_div_attached", function() {
//what to do after child div attached
});
$("div#parent-div").on("child_div_removed", function() {
//what to do after child div removed
});
You have 2 options:
Have a loop - Every x milliseconds, check to see if child-div exists / does not exists
Use the DOM4 MutationObserver - More info on this here. Note: This is only currently supported in Google Chrome browser support
Related question with answer about the DOM4 MutationObserver:
https://stackoverflow.com/a/11141879/5620297
I remember when I was playing with Flash around 10 years ago. I could create a clip, than duplicate it, and whatever I would do with clip 1 would auto-instantly change duplicated item - so in essence these where two windows of the same thing.
I wonder if same is possible with dom elements. I would like to clone element, and whatever happens to original should happen to clone too. In whatever I mean, click events and classes mostly.
This is html:
<li id="67" data-word-id="2" data-order-id="1" class="ui-state-default">
<article>
Some content...
<div class="invisible active" data-invisi-status"1"="" title="Do you want to keep this item private and invisible to anyone except for you?">Make word invisible</div>
</article>
</li>
I want to keep invisible icon active class and status synced between copied elements.
I achieve copying from 1 list to the other by:
$(this).removeClass("ui-sortable-helper").css({"height":"auto"}).clone().appendTo($list).show("slow");
How I would keep this synced?
Using classes affects all DOM elements of that class. So I guess you could think of a flash clip as a DOM element with a specific class.
$('.my-clip').removeClass('ui-sortable-helper');
Would remove the class ui-sortable-helper from all elements with the class .my-clip
However, there are certain methods which only work on one element, and it's generally the first in the selection.
If you bind an event handler to something inside .my-clip, say a link for instance, and then refer to it using the this variable, you're only updating the element that triggered the event.
For example:
$('.my-clip').on('click', 'a', function(e){
$(this).addClass('link-clicked');
});
This would only add the class link-clicked to the link that triggered the event, however, if you did:
$('.my-clip').on('click', 'a', function(e){
$('.my-clip').find('a').addClass('link-clicked');
});
It would add the class link-clicked to all a elements within all instances of .my-clip
I'm displaying a tabbed interface with the help of jQuery. When you click a tab, a ajax call will replace all html from a $(".content") element with new html, using something like
$(".content").html(response);
When I do this, are all jquery events and functions that are attached to elements inside the .content div removed? Is it ok to fire these events and functions again after I replace the HTML ? If I click the tabs 324523452354 times, will it duplicate jQuery data every time?
Yes. They will be removed. You can use the live event to attach to elements that dont exist yet.
$(".myElementClass").live("click", function (e) {
e.preventDefault();
//do stuff
});
In this case, this function will always be called on myElement no matter when it is injected into the DOM.
All HTML inside of your selector is replaced with the parameter you pass in, implying it is completely removed from the DOM. Meaning if you have:
<div id="mine">
<ul>
<li>One thing</li>
</ul>
</div>
And I do a call as such:
$('div#mine').html("hey");
My HTML will then be:
<div id="mine">
hey
</div>
As you can see the is completely removed and all its bound events mean nothing. If you use the jQuery.live() binding instead however, then elements that don't yet exist can have events associated with them. Meaning if you add some elements to the DOM then they events will still work, without you have to rebind if you add more, or replace them.
**.live** events are binded at the document level , read the following document which is really useful
http://www.bennadel.com/blog/1751-jQuery-Live-Method-And-Event-Bubbling.htm