Element and its parent have an ng-click specified, both are called - javascript

Let's say I have a DIV with a function specified to be called when clicked on it by ng-click.
Inside this DIV there's a BUTTON which also have a function to be called when clicked on, specified by ng-click.
When I click the button, both the DIV's click and the BUTTON's click functions are called.
How do I make that only the BUTTON's function is called?
I have set up this fiddle for better illustrate what I mean. Below is the code:
HTML:
<body ng-app="Test">
<section ng-controller="TestCtrl as ctrl">
<div class="square" ng-click="ctrl.divClick()">
<span>My text</span>
<button ng-click="ctrl.buttonClick()" >My button</button>
</div>
</section>
</body>
JavaScript:
(function() {
var app = angular.module('Test', []);
app.controller('TestCtrl', [function() {
this.divClick = function() {
alert('div clicked');
};
this.buttonClick = function() {
alert('button clicked');
}
}]);
})();
EDIT:
As suggested by akonsu, I just need to stop the event propagation. This worked for me.
Here's an updated Fiddle showing how it works.

Just stop propagation of the event:
<button ng-click="ctrl.buttonClick($event)">
this.buttonClick = function(e) {
e.stopPropagation();
alert('button clicked');
}

Related

How to add only one click event on a label?

Hello i'm trying to add an event of click on a button when the user click a label,
its working fine but the user have to click on the label twice i need to make it work from the first click
this is my function :
(function($){
$('.next-on-click .forminator-checkbox-label').on('click', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<lable class="next"> Next </lable>
<button class="check">Check</button>
<script>
$('.next').click(function() {
alert("Hi");
$('button.check').trigger('click');
});
</script>
example:
$('.next-on-click .forminator-checkbox-label').on('dblclick', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
})
So why would you need JavaScript to handle the click? Adding an for attribute on a label will click the button.
$("#btn").on("click", function () {
console.log("clicked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="btn">Label</label>
<button id="btn">Button</button>

ng-click for an entire DIV in AngularJS

Whenever any element inside my DIV is clicked I want to execute a function in Angular controller.
How to do this?
Basically I am looking to place a ng-click on DIV element and expect the ng-click event be called when any/all elements nested inside the div are clicked.
How to achieve this requirement?
Here both the container and the button has click events. When you click the button, the click event of its parent will also be triggered. This is called Event Bubbling in JavaScript
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.clicked = function() {
console.log("Clicked Me");
};
$scope.secondclick = function() {
console.log("Button Clicked")
}
});
.container {
width: 100%;
height: 300px;
background: cyan;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="container" ng-click="clicked()">
<button ng-click="secondclick()">Click Me</button>
</div>
</div>

Get the button text of pushed button within an element

I have two buttons in a span
<span class="somespan">
<button type="button">left</button>
<button type="button">right</button>
</span>
I have set up an .on event to trigger when one is activated.
$('.somespan').on("mousedown tap", function() {
direction = ($(this).text());
})
This produces the result leftright as it provides the button text for all buttons. How do I only get the button text for the clicked button?
The issue is because you've attached the event to the span. For this to refer to the button elements, you need to attach the event to that element instead. Try this:
$('.somespan button').on("mousedown tap", function() {
direction = $(this).text();
console.log(direction);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="somespan">
<button type="button">left</button>
<button type="button">right</button>
</span>
Alternatively, if you have to select the span, then you can find the clicked element by using event.target instead of this. Note the e in the handler function parameters.
$('.somespan').on("mousedown tap", function(e) {
direction = $(e.target).text();
console.log(direction);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="somespan">
<button type="button">left</button>
<button type="button">right</button>
</span>
You have to attatch the listener to the buttons :)
$('button').on("mousedown tap", function() {
direction = ($(this).text());
})
or in the span
$('.somespan').on("mousedown tap","button", function() {
direction = ($(this).text());
})
Try adding
$('.somespan button').on("mousedown tap", function() {
direction = ($(this).text());
})
In your case, you are adding the mousedown event to the span instead of the button

Button inside of div not working after clone

Trying to build a dashboard that lets me test animations while linking and unlinking boxes. Got everything working, but when I add the link function, I found that the link doesn't work after the parent element has been cloned. I want it to work so that when someone clicks the left box, the right two boxes show whatever animation is selected as long as the link is active. If the link is inactive, the unlinked box does not animate. Using animate.css for the animations.
Here's the html:
<div id="animations-container">
<center>
<button name="slideInLeft" class="animation-selector selected">Slide In Left</button>
<button name="slideInDown" class="animation-selector">Slide In Down</button>
<button name="zoomInUp" class="animation-selector">Zoom In Up</button>
<button name="zoomIn" class="animation-selector">Zoom In</button>
<button name="pulse" class="animation-selector">Pulse</button>
<button name="wobble" class="animation-selector">Wobble</button>
<button name="shake" class="animation-selector">Shake</button>
</center>
</div>
<div id="container">
<div id="graphs">
<div class="block"><div class="content-block" style="height:280px; background-image:url(current-open-issues-by-opco.png);"></div></div>
<div id="linked" class="linked block animated slideInLeft"><div class="content-block" style="height:237px; background-image:url(days-remaining-to-remediate-open-issues.png);"></div><div class="link-icon"></div></div>
<div id="linked" class="linked block animated slideInLeft"><div class="content-block" style="height:350px; background-image:url(root-cause-of-ltm-issues.png);"></div></div>
</div>
<div style="clear:both;"></div>
</div>
and here's my jquery:
<script>
$(function() {
$(".linked-button").on('click', function() {
$('.linked').remove().clone(true, true).appendTo('#graphs');
});
});
$(function() {
$(".animation-selector").on('click', function() {
var animation = $(this).attr("name")
// console.log("changeclass");
$(".linked").removeClass().addClass('linked block animated');
$(".linked").addClass(animation);
$("#animations-container :button").removeClass('selected');
$(this).toggleClass('selected')
});
});
$(function() {
$(".link-icon").on('click', function() {
$(this).toggleClass('faded');
$(this).parent().toggleClass('linked');
});
});
Also replicated it in jsfiddle: https://jsfiddle.net/3hjfj/
Update - working! Thanks - this was my first stackoverflow question - nice to get my cherry popped. Here's the new code:
$(function() {
$('body').on('click', '.linked-button', function() {
$('.linked').remove().clone(true, true).appendTo('#graphs');
});
$('body').on('hover', '.linked-button', function() {
$('.link-icon').toggleClass("link-hover");
});
$('body').on('click', '.animation-selector', function() {
var animation = $(this).attr("name")
// console.log("changeclass");
$(".linked").removeClass().addClass('linked block animated');
$(".linked").addClass(animation);
$("#animations-container :button").removeClass('selected');
$(this).toggleClass('selected')
});
$('body').on('click', '.link-icon', function() {
$(this).toggleClass('faded');
$(this).parent().toggleClass('linked');
$('.transparent-blue').fade();
});
$('body').on('mouseenter', '.link-icon', function() {
$('.transparent-blue').show();
});
$('body').on('mouseleave', '.link-icon', function() {
$('.transparent-blue').hide();
});
});
Apart from not needing multiple document ready functions, the event handlers are applied only to the objects with those classes that exist at the time they are run, so the cloned objects do not get them. Try this instead:
$("document").on("click", ".link-icon", function() {
$("document").on("click", ".animation-selector, function() {
and
$("document").on("click", ".linked-button", function() {
Use this for dynamically created elements:
$('body').on('click', '.animation-selector', function() {
// do something
});
$('body').on('click', '.link-icon', function() {
// do something
});

How to specify dynamic element in javascript on() function?

I have approximately such structure:
<div class='container'>
<div class='element' data-id='1'></div>
<div class='element' data-id='2'></div>
<div class='element' data-id='2'></div>
</div>
Where .elements' are rendered dynamically.
So I wrote handler for these elements:
jQuery('.container').on('click', '.element', function () { //code })
But I need to do something with element, which was clicked.
How could I get clicked element?
The clicked element will be this in your event handler function.
jQuery('.container').on('click', '.element', function () {
// use "this" or "jQuery(this)", depending on your needs
})
Note that this will point to a DOM element, in your case a <div>.
You have to do something with the target of the event.
Something like :
jQuery('.container').on('click', '.element', function (event) {
var clickedelement = $(event.target);
//code
})
HTML:
<div class='container'>
<div class='element' data-id='1'/>
<div class='element' data-id='2'/>
<div class='element' data-id='2'/>
</div>
Javascript:
$(function () {
$('.container').on('click', '.element', function () {
$clickedElement = $(this);
$data-id = $clickedElement.attr('data-id');
});
});

Categories

Resources