Subject is a problem. Well I have, for example, this html
Learn more
It doesn't work. Okay, perhaps there are some invisible elements that don't allow to click on it. Here I add onclick property:
Learn more
But now I see that "Hi" message appears (so <a> tag is clickable), but it doesn't change current page.
Well, ok. Now i'm changing javascript to:
<a onclick="window.location.href='/ru/pages/socials.aspx';return false;" href="/ru/pages/socials.aspx">Learn more</a>
and now it works as espected, but I'm looking for non-JS pure HTML solution.
Please, advice. Why <a> could be non-clickable for href, but with workable JS onclick event?
Did you add click event listeners via e.g. JQuery? Maybe you're disabling the default behaviour by something like this:
$(..).click(function(e){
e.preventDefault();
...
});
I would exclude 'wrong' markup ( like an overlapping div or something ) because you can use the link when you add an inline onclick.
Related
So I have a snippet that I'm using to build some buttons.
<font color=white><button class="button"><span>Register</span></button></font>
<button class="button" onclick="window.location='http://www.google.com';"><span>SP Training</span></button>
<button class="button"><span>Assistance</span></button>
<button class="button"><span>Orders</span></button>
<button class="button"><span>KM Milsuite</span></button>
<button class="button"><span>TMT</span></button>
As you can see I have tried wrapping the whole thing in href, I have tried wrapping the span in href, I have tried wrapping just the font in href, all failed
Ok so I trekked down the java world and tried some on click (numerous variations I have found on this site) none of which work! Every button is a clickable but EVERY button simply links back to the page i'm currently working on. By no means am I an expert at all this but I expected a little give on this!
Any suggestions?
The purpose of a button is to either:
Submit a form (type="submit", the default)
Allow JavaScript to be triggered (type="button")
As you can see I have tried wrapping the whole thing in href
The HTML specification forbids that.
I have tried wrapping the span in href
The span appears to serve no purpose
Every button is a clickable but EVERY button simply links back to the page i'm currently working on
If clicking the button is reloading the current page, then it is probably a submit button inside a form with an action attribute that resolves to the current page (or no action attribute).
If you want a link then use a link and do not use a button.
If you want your link to look like a button, then use CSS to style it that way. Note that the :active pseudo-class is useful for achieving the 3d depressed effect when the link is clicked.
The span tag inside your button is catching the click action. You must take the span out of the "bubbling" chain.
The easiest way is to apply CSS and add the class to your span tags.
span.nonclickable {
pointer-events: none;
}
After that you can catch the button clicks.
A more detailed explanation can be found here: Use CSS to make a span not clickable
It is not quite clear what you want these buttons to do. Use a-tags to link to other pages and use buttons to refer to an action in javascript or a form submit.
You could try this :
<input type="button" onclick="myF()" />
<script>
function myF() {
window.open('http://www.google.com', '_blank', 'resizable=yes');
}
</script>
Hope it helps
I've tried looking at the documentation for addThis and it seems like it's being updated or something because all the links these help posts link to don't even mention the API bits they describe.
Anyway,
I just need to be able to programmatically click an addThis button. However, I can't seem to do it via console before I implement it in my code.
I read that this has something to do with how the addThis listeners are added only when the document is done loading. This doesn't make sense to me because even if I manually try to trigger a click in console, it still does nothing but return the html of the link I'm trying to trigger. For example:
`$('.at-svc-facebook').click();`
OR `$('.at-svc-facebook').trigger('click');`
OR `$('.at-share-btn.at-svc-facebook').click();`
I mean, by the time I open console the dom is ready. So then what else might be preventing me from clicking these buttons via jQuery?
I've tried adding a listener to an element myself, and then clicking it programmatically, and it works. So something is different about the way addThis listens for a click. I may update this question with something I find after inspecting their js.
===================
This is what is in the DOM which addThis populates and listens to:
<div class="addthis_sharing_toolbox"></div>
This is what ^ that code is turned in to from addThis:
<div class="addthis_sharing_toolbox" data-url="http://localhost:8001/halloween/" data-title="33 Halloween Costume Ideas">
<div id="atstbx" class="at-share-tbx-element addthis_32x32_style addthis-smartlayers addthis-animated at4-show">
<a class="at-share-btn at-svc-facebook">
<span class="at4-icon aticon-facebook" title="Facebook"></span>
</a>
<a class="at-share-btn at-svc-twitter">
<span class="at4-icon aticon-twitter" title="Twitter"></span>
</a>
<a class="at-share-btn at-svc-google_plusone_share">
<span class="at4-icon aticon-google_plusone_share" title="Google+"></span>
</a>
</div>
</div>
Now, you can see the jQuery I'm using to click the buttons and the code it's trying to click.
The issue is that addThis was putting a second link with the exact same class in the DOM for some reason. It generates some HTML and appends it to body.
So what I needed to do to select the button and trigger a click was to specify the 2nd element in the array of elements and call click on that one. Like so:
$('.at-svc-facebook')[1].click();
Now, the next problem I face is chrome block a programatic popup, but that's beyond the scope of this question. :(
change the
var class_name = $(this)[0].className;
as below,
var class_name = $(this)[0].attr('class');
and it'll work. :)
I am facing a weird issue. I have an a href tag
<a class="link" data-bind="click: templateToUse" href="#" id="InputType"><b>Title:</b> Content</a>
My JS
$('.link').click(function(event){
if(event.target.id!='')
alert(event.target.id);
else
alert('undefined');
});
Fiddle: http://jsfiddle.net/sourabhtewari/ork50uf7/
Now if I click on the bold 'Title', it gives me an empty target Id. I assume that since the whole text is within the a href tag, it should send out the event target id, but incase we have a formatted text in the link, the formatted text wont send the correct event target.
Now, I am sure there is an easy fix for this. Maybe I am using CSS incorectly. I tried using the 'display:block' but this wont help either.
You need to use currentTarget. See MDN for an overview of the different "targets" in an event objects.
Solution:
if(event.currentTarget.id!='')
alert(event.currentTarget.id);
Working fiddle.
i am using bootstrap to change the button color when clicked, but i think i am doing something wrong and the button is not changing it's color when i am clicking the button.
this is my button code -
<td>
<a class="mylink" href="#"><button class="btn btn-default btn-xs">{% trans %}Allow{% endtrans %}</button></a>
</td>
this is my javascript code ---
<script type="text/javascript">
$(document).ready(function() {
if (localStorage.getItem('isCliked'){
$("#mylink").addClass('btn-success');
$("#mylink").removeClass('btn-default');
}
$('#mylink').on('click', function() {
$(this).addClass('btn-success');
$(this).removeClass('btn-default');
// set the value upon clicking
localStorage.setItem('isCliked', true)
});
i need to change the button color when clicked and when the page is called again it should check whether it is activated or not.
Can anyone help me to solve this problem.
Probably the problem is here.
$("#mylink")
This selects the element with the id="mylink" and not the element with the class="mylink"
If you want to select a class, go for this.
$(".mylink")
CSS Selectors: w3schools
First of all, mylink is a class in your code.
<a href="#" class="mylink">
But in jQuery you're using an ID ($("#mylink")). Also, <a> is an ascendent of <button>. So correct your every bit of $("#mylink") to:
$(".mylink button")
That way you'll be targeting the <button> tag inside your <a> tag with class .mylink.
Reference: http://www.w3schools.com/jquery/jquery_ref_selectors.asp
With $('#someID') you are selecting something by it's id. But you use classes ("myLink") so you should use $(".myLink").
And despite that you make it more complicated than it needs to be. Maybe you want to try to do it just with css.
Here is an example which is very similar to your question:
Pressed <button> CSS
There are some errors in your code:
It is jQuery, not JavaScript (it's a little bit different)
You are changing the <a> class "myLink" NOT the <button> class
You are referring to a class (".myClassName") as a id ("#myIdName")
Others things (i.e. how javascript handle the DOM element)... you should read and study a little bit more.
Anyway, I've made you a working fiddle.
I'm having a problem simulating a click on a nested link within a nested div using jQuery. Can anyone help with the following? How would I simulate a click on the link with id=video2 in the code below?
<div id=tS2 class=outer>
<div class=middle>
<div class=inner>
<a href="#" id=video2 class=trigger><img src="imgs/thumbs/thumb_02.jpg" ></a>
</div>
</div>
</div>
Try: $("#video2").trigger("click"); if you have a click function attached using jQuery.
If you don't have a jQuery click event attached, and you just want to simulate a click and get the default behaviour. Use: document.getElementById("video2").click();, but with your current setup, doing this would just send you to the same page again, as you only have a # in your href attribute.
Even though things will work without them in this case, you should add double quotes around you HTML attributes to make your HTML valid.