I have this situation:
<a href="#"
class="btn btn-xs btn-bricky tooltips"
:data-id="row.id"
data-placement="top"
data-original-title="Remove"
#click.self.stop="removeRow($event)">
<i class="fa fa-times fa fa-white"></i>
</a>
Now, when I click on link it's ok, but if I click on <i> (which is inside of <a>) nothing happens (because of #click.self.stop).
What I would like to achieve is to trigger same method, in this case removeRow(), no matter if I click <a> or <i> is clicked. I need to get data-id attribute form ahref.
What I would like to achieve is to trigger same method, in this case removeRaw, no matter if I click <a> or <i> is clicked.
From what you say, you actually have to just remove the .self modifier.
Per docs (Event Handling/Event Modifiers/.self):
<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>
See changed code below.
new Vue({
el: '#app',
data: {
rows: [{id: 1, name: "row1"}, {id: 2, name: "row2"}]
},
methods: {
removeRow($event) {
console.log($event.currentTarget.dataset.id)
}
}
})
<script src="https://unpkg.com/vue#2.5.13/dist/vue.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div id="app">
<div v-for="row in rows">
<a href="#"
class="btn btn-xs btn-bricky tooltips"
:data-id="row.id"
data-placement="top"
data-original-title="Remove"
#click.stop="removeRow($event)">
<i class="fa fa-times fa fa-white"></i> {{ row.name }}
</a>
</div>
</div>
The only modified bit in the template was #click.self.stop="removeRow($event)"
to #click.stop="removeRow($event)".
In the JS part, I created a rows just to test, and added console.log($event.currentTarget.dataset.id) to show how to get the id.
Then you don't need to use stop propagation or call function on self:
<a href="#"
class="btn btn-xs btn-bricky tooltips"
:data-id="row.id"
data-placement="top"
data-original-title="Remove"
#click.prevent="removeRow($event)">
<i class="fa fa-times fa fa-white"></i>
</a>
prevent is used to prevent the default link action.
You can use currentTarget instead of target to identify the attached element and get the href value from there.
$event.currentTarget.href
Alternatively, why not just to set the value in params:
#click.prevent="removeRow('your-value')"
In your method:
removeRow(myvalue) {
// do whatever you want to do with myvalue
}
The solution is quite easy. use #click.stop
#click.stop(openUser(user))
You can use the following sample to get it to work.
Run the code and click on the three texts, but you will only get the data-id value of the child and parent divs
new Vue({
el: '#app',
methods: {
init($event){
let el = $event.target.nodeName
var id = null;
if(el == 'A'){
id = $event.target.dataset.id
}
if(el == 'I'){
id = $event.target.parentElement.dataset.id
}
console.log( ' id', id)
}
}
})
<script src="https://unpkg.com/vue#2.5.9/dist/vue.js"></script>
<div id="app">
<a href="#" #click='init' data-id='42'> Inside A <br/>
<i>Inside I</i>
</a>
</div>
Related
A demo of my dilemma here
Let's say I have the following html:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<div class="main" id="thingSection">
<h1>
Test Header
</h1>
<button class="btn-icon"><i class="fa fa-fw fa-lg fa-windows"></i> <i class="fa fa-fw fa-lg fa-toggle-off"></i> <i class="fa fa-fw fa-lg fa-apple"></i></button>
<div class="content" id="content1">
Some content
</div>
</div>
<hr />
<div class="main" id="thingSection1">
<h1>
Another Test
</h1>
<button class="btn-icon"><i class="fa fa-fw fa-lg fa-windows"></i> <i class="fa fa-fw fa-lg fa-toggle-off"></i> <i class="fa fa-fw fa-lg fa-apple"></i></button>
<div class="content" id="content2">
Some content
</div>
</div>
<hr>
<div class="main" id="thingSection2">
<h1>
Another test, you say?
</h1>
<button class="btn-icon"><i class="fa fa-fw fa-lg fa-windows"></i> <i class="fa fa-fw fa-lg fa-toggle-off"></i> <i class="fa fa-fw fa-lg fa-apple"></i></button>
<div class="content" id="content3">
Some content
</div>
</div>
</body>
</html>
I am using the following jquery to change the toggle icon from FontAwesome from off to on:
$(function() {
$('.btn-icon').click(function() {
if ($(this).find($(".fa")).hasClass('fa-toggle-off')) {
$("i.fa-toggle-off").toggleClass('fa-toggle-on');
} else {
$("i.fa-toggle-on").toggleClass('fa-toggle-off');
}
});
});
When I click the button to toggle the icon, it works as expected, i.e. it changes all of the buttons on the page. However, I would like to dynamically determine which button has been pressed, and then change the content of a child div based on the position of the switch.
I want to avoid hardcoding id's for each button to avoid a ton of if/else statements in the script that must be updated each time I, say, add a new button or a new section. That is to say, I want to dynamically detect which button has been pressed, and affect only that button and its children.
I've noticed that console.log(this) yields only the HTML for the particular button that has been pressed, not all of the buttons.
I'm a novice with jquery. I haven't been able to find a solution to this problem yet, and I feel like there has to be a way to do this dynamically without hardcoding IDs.
EDIT: I've accomplished (partially) what I want to do with the following code:
$(function() {
$('.btn-icon').click(function() {
var t = $(this).find('.is-toggle');
if (t.hasClass('fa-toggle-off')) {
t.addClass('fa-toggle-on');
t.removeClass('fa-toggle-off');
}
else {
t.addClass('fa-toggle-off');
t.removeClass('fa-toggle-on');
}
});
});
Looks like I just didn't understand what exactly $(this) was (:
All you need is $(this) that selects the element that triggered the event. From there you can select down to the div you want.
EDIT: Here is how that might look in code, I pulled this from your fiddle and edited it
$(function() {
$('.btn-icon').click(function() {
$(this).children('.fa-toggle-off, .fa-toggle-on').toggleClass('fa-toggle-on fa-toggle-off');
});
});
I have a button that is being used to toggle a class on a div to open and close a side menu.
<div id="body-holder" [ngClass]="{'show-nav':isActive}">
<div class="site-wrap">
<button class="toggle-nav" (click)="flipper()">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
</div>
</div>
In my component.ts file i have the following code.
isActive: boolean = true;
flipper()
{
this.isActive = !this.isActive;
}
however instead of toggling the class when I click the button the page gets reloaded instead and redirects me to my application homepage.
You have to add preventDefault to your click event in this way:
flipper(event: any)
{
event.preventDefault();
this.isActive = !this.isActive;
}
and in your html code:
<button class="toggle-nav" type="button" (click)="flipper($event)">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
Set button type attribute to type="button":
<button type="button" class="toggle-nav" (click)="flipper()">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
Setting the button type to type="button" might also solve the problem
<button type="button"
It seems your button is inside a form and causes a submit.
Button inside division or form most of the times have default behavior of loading the page. For that reason, It's better to set type attribute of button as "buton".
<button type="button" class="toggle-nav" onclick="flipper()"> <i class="fa fa-bars" aria-hidden="true" ></i></button>
I think there is mistake in function. You missed to mention "funtion" keyword before you define the function. I tried a sample fiddle: here
<script>
isActive: boolean = true;
function flipper()
{
alert("a");
}
</script>
This code will replace what is shown inside <button></button> with selected icon from dropdown list.
This works good, only problem is that after clicking on selected element, icon inside that element will for some reason disappear? Why does this happen? I want <li> to be unchanged
http://codepen.io/filaret/pen/PGJEAL
HTML:
<div class="input-group-btn">
<button type="button" class="btn" data-toggle="dropdown">
<i class="fa fa-book"></i>
</button>
<ul class="dropdown-menu">
<li><i class="fa fa-book"></i> Something 111</li>
<li><i class="fa fa-newspaper-o"></i> Something 2222</li>
</ul>
</div>
jQuery:
var $selectWrapper = $('.input-group-btn');
$selectWrapper.find(".dropdown-menu li").click(function() {
// Get <i class="fa"></i>
var $selectedIcon = $(this).find('.fa');
// Put it inside <button></button>
$selectWrapper.find(".btn").html($selectedIcon);
});
You need to clone the icon using clone() like following
var $selectedIcon = $(this).find('.fa').clone();
instead of
var $selectedIcon = $(this).find('.fa');
UPDATED CODEPEN
Otherwise since you have i tag in dropdown and button tag and that only class change, why don't you just copy the class, it's more efficient, faster and easy to understand in your code.
jQuery(document).ready(function($) {
"use strict";
var $selectWrapper = $('.input-group-btn');
var $buttonIcon = $('.btn i');
$selectWrapper.find(".dropdown-menu li").click(function() {
// Get <i class="fa"></i>
var $selectedIcon = $(this).find('.fa');
// get icon classes
var classes = $selectedIcon.attr("class");
// Put the class in the button i tag
$buttonIcon.attr('class', classes);
});
});
See code pen: http://codepen.io/anon/pen/ORxQPZ
I have this anchor tag defined:
<a ng-disabled='placeOrderDisabled()' href='#Url.Action("Order","ShoppingCart")?deliveryMethod={{deliveryMethod}}' class="btn btn-primary">
{{ placeOrderButtonText }} <i class="fa fa-chevron-right"></i>
</a>
In Firefox and Chrome, the anchor tag is still clickable though, and I understand from other answers that this is by design, and I need to use a button instead.
Please advise how I need to refactor the above code to use a button element since the button element cannot have the href attribute.
You could try this:
<button class="btn btn-primary" ng-disabled="placeOrderDisabled()" ng-click="clickFn()">
<i class="fa fa-chevron-right"></i>
</button>
on JS file. I assume #Url.Action is object function inside the controller.
$scope.clickFn = function () {
var url = $scope.Url.Action('Order','ShoppingCart') + '?deliveryMethod=' + $scope.deliveryMethod;
window.location.href = url;
}
Don't refactor your code. You can still achieve the disabled behavior with the anchor tag using the CSS.
a.disabled, a[disabled] {
pointer-events: none;
}
From the docs:
The CSS property pointer-events allows authors to control under what
circumstances (if any) a particular graphic element can become the
target of mouse events. When this property is unspecified, the same
characteristics of the visiblePainted value apply to SVG content.
See a working example below:
var app = angular.module("sa", []);
a.disabled,
a[disabled] {
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div ng-app="sa" ng-init="disableButton = false">
<a ng-disabled='disableButton' href="" class="btn btn-primary">
I'm an anchor button <i class="fa fa-chevron-right"></i>
</a>
Disable the anchor button
</div>
I've used the following code to init the bootstrap popover.
Markup
<a class="help_popup" rel="popover" data-popover-content="#apiSearchTips" data-placement="bottom">
<span class="icon fw-stack fw-lg add-margin-left-1x" stylZ="font-size:10px">
<i class="fw fw-circle fw-stack-2x"></i>
<i class="fw fw-question fw-stack-1x fw-inverse"></i>
</span>
</a>
<div id="apiSearchTips" class="hide help-popover-content" >
//Popover content
</div>
Code
$('a[rel="popover"]').popover({
container: 'body',
html: true,
trigger:'click',
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
}).click(function(e) {
e.preventDefault();
});
This does not work unless I change the selector attribute to a different one rather than rel="popover". For an example say I change it to data-trigger="popover" and it works. Why does this happen?