I have a simple un-ordered list populated with ng-repeat and I want something to happen every time a user clicks on one of the list items. However, ng-click doesn't seem to be working with any of the divs inside my html, it only works with buttons. At first I thought the issue would be with the ng-repeat but it turns out that even outside of the ng-repeat ng-click does not seem to work. I have tried using ng-mousedown as well, and it doesn't seem to be working either.
Here is my html:
<div class="noteItem" ng-mouseleave="btnShow = false" ng-mouseenter="btnShow = true" ng-click="alert('click');">
<li>
{{note.subject|removeHTML}}<a ng-show="btnShow" ng-click="deleteNote(note._id)"><i>DELETE</i></a>
</li>
</div>
I have tried wrapping another div outside of this div as well but it still didn't work. I have been stuck on this problem for about an hour now.
You have ng-click in div and also in <a> element, the one being executed is in the <a> element not the ng-click in div.
Try to add div like this and try to click.
<div ng-click="yourScopeMethodHere()">click me</div>
BTW, directly calling JS alert() in ng-click will not work.
When the ng click get executed it looks for scope function and expressions. alerts and console logs neither of it so it won't get executed like this. What you can do is create a scope function and call the alert inside that function.
As you have a ng-click on the parent element (<div>) as well, the click will be triggered on both. You can cancel parent ng-click on the child with $event.stopPropagation().
<div ng-mouseleave="btnShow = false" ng-mouseenter="btnShow = true" ng-click="alert('click');">
<li>
{{note.subject|removeHTML}}
<a ng-show="btnShow" ng-click="$event.stopPropagation(); deleteNote(note._id)"><i>DELETE</i></a>
</li>
</div>
As a side note, ng-click="alert('click') will seek for $scope.alert(), if you are hoping to open the JavaScript basic alert... ;-)
Related
I'm new to Nextjs, doing setup for a nextjs react project. I used create-next-app to initialize code base, then realized that there's a weird div tag with the class 'selection_bubble_root' right inside body. Its visibility is set to hidden but it still spares an annoying empty block.
Does anyone know about it? What is it for or how to remove it? Many thanks!!
Not sure what that is for, but there is a thing called bubbling and it is triggered for example when you have a clickable element inside another clickable element.
something like
<div class="item1" onclick="do1()">
<div class="item2" onclick="do2()">
<div class="item3" onclick="do3()">
</div>
</div>
So when you click on item3 it will execute do3() first, but then it will also execute do2() and do1() as long as you dont disable it.
So this is called bubbling, it goes up from child to parent and the bubble root is item1 (in this case).
Opposite effect is called capturing
I want to animate certain divs inside v-for loop on click event. For that i need to have dom/jquery elements to work on. Of course i dont want to animate all elements at once, just these specific ones i click.
I wanted to use v-el to achive this, but it doesnt work, $els object doesnt return anything. This is what i tried:
<li v-for="element in elements" v-el="li">
<span v-el="span">lorem</span>
<span v-el="span2"> ipsium {{element.content}}</span>
</li>
https://jsfiddle.net/w1cd96ux/
v-el doesn't work on or within a v-for. If each <li> is a component you can use v-ref though then you'd have access to each span through v-el (which is deprecated in the next version of Vue).
I'd probably just take this approach, if I'm understanding correctly:
<li v-for="item in items" #click="animate">
<span>...</span>
<span>...</span>
</li>
Then in your methods you can do:
methods: {
animate(event) {
const li = event.currentTarget
const spans = li.querySelectorAll('span')
...
}
}
Two things:
Correct way to define v-el as per latest version is v-el:span. check this link https://vuejs.org/api/#v-el
your this inside ready method points to top level div so if you put the v-el at top level and try to print in ready function, it will print.
check this jsfiddle
https://jsfiddle.net/oyomyosw/
I have a nested div.
The child div is inside the parent div.
How can I distinguish the correct onClick function?
In this case, only the function of parent div is called no matter clicking where I click on the nested div.
<div class="portfo" onclick="showValue()">
<div id="cross" onclick="deleteValue()">
<img src='cross.png' height='15px' width='15px' alt='some'>
</div>
</div>
However, showValue is always called whenever I click on the children div.
delete is a reserved word. Try renaming that function to something else. Then both events should fire when click on the image. First the delete event and then the showval one
I think a library like jQuery can help you out here. Take a look at the .on() method.
I think your problem has to do with Event Propogation. This should help you solve it: Prevent event propogation
Also, delete() is a predefined function in JavaScript, you should rename it to something else, unless you're trying to use the built-in function, in that case, please look at the proper usage: delete
So... this is a simple question with a simple answer, but somehow my RTFMing isn't proving any results.
I have a link within a div, like so:
<div> <a href=''>Close</a>
I'd like to close that div with that link, and I've been trying the following code:
<div> Close
However, it still hasn't worked... any suggestions are greatly appreciated.
Change it to this:
<div> Close
The reason is that when using href="javascript:..., this doesn't refer to the element that received the event.
You need to be in an event handler like onclick for that.
I am having nested DIV's. Below is the Example.
<div id="one">
<div id="two">
</div>
</div>
I am calling a javascript function when we click on div one and div two.
Now the problem is sometimes the size of div two is large so that div one goes behind div two. Actually if i click div two i want to call both div one and div two. Since the javascript function name is dynamic, i am stuck.
Any idea how to call both js functions when we click div 2.
You might find the discussion here interesting. It gives good explanation and examples of event bubbling and propagation.
At the end of div 2's click handler, you could call div 1's.
UPDATE:
What I meant is you could fire a click event on div 1 when div 2 is called.
using jQuery you could do something like this
$('div2').click(function() {
$(this).parent().click();
}