I am trying to access a button in my leaflet map. The button is created using a plugin "easy-button".
My main goal is to see if the button has been clicked (is active), I will use it for validation in another function, not shown here.
This is how the html for the button looks like in the browser debugger (I believe the html is created by the plugin?).
Before it's clicked
<button class="easy-button-button leaflet-bar-part leaflet-interactive add-markers-active" title="Vis crosshair">
<span class="button-state state-add-markers add-markers-active">
<span class="fa fa-crosshairs fa-lg"></span>
</span>
</button>
After it's clicked
<button class="easy-button-button leaflet-bar-part leaflet-interactive remove-markers-active" title="Fjern crosshair">
<span class="button-state state-remove-markers remove-markers-active">
<span class="fa fa-undo"></span>
</span>
</button>
This click function access the button and show 'Button was clicked' but the if statement does not pass. I got to the button using Copy CSS path in the browser, but it seem really long.
$("div.leaflet-bar.easy-button-container.leaflet-control > button > span").click(function(){
alert("Button was clicked");
if
($('span').hasClass('fa fa-crosshair fa-lg'))
{
alert('My button has active class')
}
});
Any advice on what I am doing wrong?
This
if($('span').hasClass('fa fa-crosshair fa-lg'))
Will not target the span you are expecting it to.
You wanted
if($('span',this).hasClass('fa fa-crosshair fa-lg'))
To target the child span of the span you clicked on
Run this example, hope it helps:
$(document).ready(function() {
// My example to trigger the click on buttons..
$("button > span > span").click(function(){
alert("Button was clicked");
if (
//$(this).hasClass('fa') && <-- You don't need it, both have it
$(this).hasClass('fa-crosshairs') &&
$(this).hasClass('fa-lg')
) {
alert('My button has active class');
} else {
alert('Ops..');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Unclicked -->
<button class="easy-button-button leaflet-bar-part leaflet-interactive add-markers-active" title="Vis crosshair">
<span class="button-state state-add-markers add-markers-active">
<span class="fa fa-crosshairs fa-lg">click me</span>
</span>
</button>
<!-- Clicked -->
<button class="easy-button-button leaflet-bar-part leaflet-interactive remove-markers-active" title="Fjern crosshair">
<span class="button-state state-remove-markers remove-markers-active">
<span class="fa fa-undo">clicked</span>
</span>
</button>
Related
This seems to change the glyphicon only when I click glyphicon itself. I want it to change when I click the button.
<script>
$('.glyphicon').click(function(){
$(this).toggleClass('glyphicon-star-empty glyphicon-star');
});
</script>
<button class="btn btn-default">
<span class="glyphicon glyphicon-star-empty"></span>
</button>
You can use this jQuery code.
$(document).ready( function() {
$('.btn').click(function(){
$(this).find('.glyphicon').toggleClass('glyphicon-star-empty glyphicon-star');
});
})
You have to bind the event on the button, not only the icon, else it will be triggered only clicking the star.
I am writing a powershell script to login to a website. I want to use the button.click functionality but I can't find the button's id. here is what I found by inspecting it.
<div tabindex="0" role="button" class="v-button v-widget default v-button-default">
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
</div>
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
<span class="v-button-caption">Login</span>
Thanks in advance
Given that you aren't sure which one is the one you want, you could just set up an event handler that will trigger for each and then interrogate it for something that can identify it.
// Get all the elements with a class of "v-button-caption" into an array
var buttons = Array.prototype.slice.call(document.querySelectorAll(".v-button-caption"));
// Loop over the array
buttons.forEach(function(btn){
// Set up a click event handler
btn.addEventListener("click", function(evt){
// Print out some identifying information about the clicked element
console.log("You clicked the element who's parent is: " + evt.target.parentElement.nodeName);
});
});
<div tabindex="0" role="button" class="v-button v-widget default v-button-default">
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
</div>
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
<span class="v-button-caption">Login</span>
on my screen i am showing a few inputs like this.
<span>
<input #field (keyup.enter)="setName(item,field.value); newfolder = null" type="text" class="top-of-dom folder_name_text_box">
<button class="top-of-dom" [ngClass]="{'active': item.folder_type=='category'}" (click)="item.folder_type='category'">single</button>
<button class="top-of-dom" [ngClass]="{'active': item.folder_type=='label'}" (click)="item.folder_type='label'">multi</button>
<i class="fa fa-check cursor-pointer top-of-dom" (click)="setName(item,field.value);" aria-hidden="true"></i>
<i class="fa fa-times cursor-pointer top-of-dom" (click)="deleteNode(item.id);"></i>
</span>
all i want to do is when the user losses focus and does not click the check r times icon. an event should be triggered.
In simple words if the user presses anything other than these five elements i want to call an event. I have tried to apply (blur)="SomeMethod" to the span above, but it is useless. And applying it on input tag simply calls the event even if the i in the same group is clicked
use
<span tabindex=0></span>
to ger focus on your span and then you can call blur method.
so basically the blur event fires when the focus is lost. By default, a div or span element cannot have the focus in the first place so it can't be lost.
here if you set tabindex on a span, then it can gain the focus and you call your function on blur. this also works with tab key press event.
for more check this fiddle
it is done in core js, not on angular but you can use the same logic in angular refer, try this
document.body.addEventListener("click", function() {
var parents = [];
var p = event.target;
while (p !== document) {
var o = p;
if(o.className.indexOf("input-items") !== -1) break;
p = o.parentNode;
}
if(p === document) {
// your code here
console.log("here");
}
})
<body>
<span class="input-items">
<input #field (keyup.enter)="setName(item,field.value); newfolder = null" type="text" class="top-of-dom folder_name_text_box">
<button class="top-of-dom" [ngClass]="{'active': item.folder_type=='category'}" (click)="item.folder_type='category'">single</button>
<button class="top-of-dom" [ngClass]="{'active': item.folder_type=='label'}" (click)="item.folder_type='label'">multi</button>
<i class="fa fa-check cursor-pointer top-of-dom" (click)="setName(item,field.value);" aria-hidden="true"></i>
<i class="fa fa-times cursor-pointer top-of-dom" (click)="deleteNode(item.id);"></i>
</span>
<h1> click here </h1>
<h1> click here </h1>
<h1> click here </h1>
<h1> click here </h1>
</body>
Go for
(clickOutside)="something"
on span
check here
I have divs with a link in each. After clicking on the link, the div is hidden. I want to make a redirection to another page when all the divs are hidden.
Here is my code:
<div class="checkhide">
<div>
<div>
<a href="#" class="btn" onClick="$(this).parent().parent().parent().hide()" role="button">
<span class="glyphicon glyphicon-remove">
</span>
</a>
</div>
</div>
</div>
Not clear what you mean 'all' div, it seems this onClick="$(this).parent().parent().parent().hide()" only works for ONE div.
Maybe if add class 'hidden' to <div> when click <a > , and if you know how many div there are, like 4.
Then check whether 'all' div class contain 'hidden', by:
$("a").on('click', function(){
// here should be some div you want to hide
$(".checkhide").addClass("hidden");
})
var hidden_div_number = $("div").find("[class*='hidden']").length;
if (hidden_div_number==4){
// do something;
}
I solved the problem. That was just a typo. I forgot the "." in my javascript:
$(function() { if ( $(".checkhide:visible").length === 0) alert('all are hidden'); });
Thank you all!
I have a table cell which has 2 span elements in it:
<span contentEditable=true class="editspan"></span>
<span class="pencilspan glyphicon glyphicon-pencil pull-right"></span>"
When I click on span1 I get an input box which I can edit. I want to force a click on span1 if I click on span2 (edit glyphicon). How can I do this?
If I understand you correct, if you click span 2, then you want it to click on span 1 also?
$('.pencilspan').click(function() {
alert("pencilspan is clicked")
$('.editspan').click();
alert("editspan is automatic clicked")
});
$('.editspan').click(function() {
$('<input placeholder="box created by editspan"/>').appendTo('body')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="editspan">span 1</span><br>
<span class="pencilspan glyphicon glyphicon-pencil pull-right">span2</span><br>
This should give you an idea about it.
Updated with your spans, Only added some text inside for the visible effect