I know there is many topics for check a checkbox by clicking on href, but in every solution i seen, you can't check the checkbox by clicking on the checkbox, because it wrapped by the <a> tag.
There is my html :
<a href='#' id='cb'>mode<input type='checkbox' id='mode'></a>
My Jquery :
$("#cb").click(function(e) {
e.preventDefault();
$("#mode").prop("checked", !$("#mode").prop("checked"));
})
What I need :
I need to be able to check the checkbox by clicking on href AND by clicking on the checkbox.
If this post is duplicate, i'm sorry but i didn't see it, link me the duplicate and i'll remove this.
JSFiddle
Check tag name of target to prevent while clicking on input - https://jsfiddle.net/fwzd08cw/2/
$("#cb").click(function(e) {
if((e.target).tagName == 'INPUT') return true;
e.preventDefault();
$("#mode").prop("checked", !$("#mode").prop("checked"));
});
$("#cb").click(function(e) {
if((e.target).tagName == 'INPUT') return true;
e.preventDefault();
$("#mode").prop("checked", !$("#mode").prop("checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' id='cb'>mode<input type='checkbox' id='mode'></a>
Your code have two events 'click' when you has click on checkbox, the parent trigger the 'click' event of them.
You need use event.stopPropagation() function to negate the propagation of event from children to parent.
$("#cb").click(function(e) {
e.preventDefault();
$('#mode').click(function(e) {
e.stopPropagation();
})
$("#mode").prop("checked", !$("#mode").prop("checked"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' id='cb'>mode<input type='checkbox' id='mode'></a>
Add style on input:
pointer-events: none;
Try this, keep your input tag outside the anchor.
<a href='#' id='cb'> mode </a><input type='checkbox' id='mode'>
Try this without any JS code:
<a href='#' id='cb'><label>mode<input type='checkbox' id='mode'></label></a>
https://jsfiddle.net/fwzd08cw/5/
The 'checking' is twice inverted when clicking on the checkbox,
Add : $("#mode").click(function(e) { e.stopPropagation(); }); to prevent this side effect of being inside the link.
Use $('#cb, #mode') to select both elements
Use $(this).is('a') to check if href was the trigger and then check or uncheck accordingly
In every case do e.stopPropagation() to avoid calling click both times when checkbox is clicked 9one for input and one for href)
$('#cb, #mode').click(function (e) {
if ($(this).is('a')) {
e.preventDefault();
$('#mode').prop('checked', !$('#mode').prop('checked'));
}
e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' id='cb'>mode<input type='checkbox' id='mode'></a>
I don't know why you put checkobx inside the link but if you want a solution you can but the link inside a span like this
mode</span><input type='checkbox' id='mode'>
$("#mohamed").click(function(e) {
e.preventDefault();
$("#mode").prop("checked", !$("#mode").prop("checked"));
})
check this pen http://codepen.io/mohamed_sobhy292/pen/wWPzoo
Related
I have several elements on a page like bottom code.
<div>
click
some content
</div>
They can be clicked and jQuery picks that click. However one of the elements has a a link that is clicked should not be picked as a click of the parent element.
$('div:not(#notme)').on('click', function(e) {
// do something
});
Doesn't seem to work for some reason...
Use :has selector to selecting div element has specific child. In :has use :not.
$("div:has(a:not(#notme))").on("click", function(e) {
console.log("clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
click
some content
</div>
<div>
<a href="#" >click2</a>
some content 2
</div>
You may try:
$('div').on('click', function(e) {
if($(e.target).attr("id") !== "notme") {
// do something
}
});
$('#notme').on('click', function(e) {
e.stopPropagation();
});
I am trying to get Image ALT values on click event but it's not working as it should be and displays the same value (Image ALT) on click.
Here is the code:
HTML:
<a href="//cdn.shopify.com/s/files/1/0720/9527/products/MDM02-south-east-postcode-district-map-detail-large_ee8e2826-b33b-4c77-83b2-f162df33ec33_large.gif?v=1420644155" class="product-photo-thumb" title="Map 1">
<img id="imgVariants" src="//cdn.shopify.com/s/files/1/0720/9527/products/MDM02-south-east-postcode-district-map-detail-large_ee8e2826-b33b-4c77-83b2-f162df33ec33_compact.gif?v=1420644155" alt="Map 1">
</a>
<a href="//cdn.shopify.com/s/files/1/0720/9527/products/png_large.png?v=1420644163" class="product-photo-thumb" title="Map 2">
<img id="imgVariants" src="//cdn.shopify.com/s/files/1/0720/9527/products/png_compact.png?v=1420644163" alt="Map 2">
</a>
Javascript / jQuery
$(document).ready(function(){
$('.product-photo-thumb').on("click", function (e) {
e.preventDefault();
alert(document.getElementById("imgVariants").alt);
});
});
>> jsFiddle link
Am I missing anything?
P.S.: I know IDs must be unique but I wanted a solution that can work even without unique IDs.
There are two elements with same Id(shouldnt be), remove them and you should use something like e.target
here is an working example.. http://jsfiddle.net/83cyuozz/1/
$(document).ready(function(){
$('.product-photo-thumb').on("click", function (e) {
e.preventDefault();
alert(e.target.alt);
});
});
try this code
$(document).ready(function(){
$('.product-photo-thumb').on("click", function (e) {
e.preventDefault();
alert($(this).find('img').attr('alt'));
});
});
DEMO
NOTE ID must be unique.
Here is the working example where there can be multiple elements with same ID, and yet it will work fine: JSFIDDLE
$(document).ready(function(){
$("body").on("click",".product-photo-thumb", function (e) {
e.preventDefault();
alert($(this).children("img").attr("alt"));
});
});
I am creating multiple anchor tags dynamically.I wanted to get the href value of clicked anchor tag in javascript. I am using following code to do that
javascript
document.getElementById("aaa").href
<a id="aaa" onclick="follow(this);" href="sec/IF 00.html">Hi</a>
<a id="aaa" onclick="follow(this);" href="sec/IF 002.html">Hi</a>
but everytime when I am clicking on the anchor tag ,through javascript i am getting value of first anchor tag.I was thinking it will get the value of clicked element.
Is there any other way I can get the multiple dynamically generated value of href from tag.
function follow(item) {
href=document.getElementById("aaa").href;
document.writeln(href);
}
Try this code:
function follow(item) {
alert(item.href);
}
UPDATE
But you have to disable native link click triggering:
html:
<a onclick="follow(event, this);" href="sec/IF00.html">Hi</a>
javascript:
function follow(e, item) {
e = e || window.event; //IE stuff
e.preventDefault(); //prevent link click triggering
e.returnValue = false; //also prevent link click triggering (old IE style)
alert(item.href);
}
And you don't have to use id attribute at all
UPDATE 2
Full code:
<!DOCTYPE html>
<html>
<head>
<script>
function follow(e, item) {
e = e || window.event; //IE stuff
e.preventDefault(); //prevent link click triggering
e.returnValue = false; //also prevent link click triggering (old IE style)
alert(item.getAttribute('href'));
}
</script>
</head>
<body>
<a onclick="follow(event, this);" href="sec/IF00.html">Hi</a>
<a onclick="follow(event, this);" href="sec/IF002.html">Hi</a>
</body>
</html>
Ids must be unique. Set a different id to each <a> tags
<a id="aaa" onclick="follow(this);" href="sec/IF00.html">Hi</a>
<a id="bbb" onclick="follow(this);" href="sec/IF002.html">Hi</a>
document.getElementById("aaa").href // sec/IF00.html
document.getElementById("bbb").href // sec/IF002.html
html:
<div style="width: 260px;margin:25px 0 0 30px">
<input type="checkbox" name="send_email" class="delete_followup" />Send email alerts
<input type="checkbox" value="delete" type="checkbox" />Send SMS alerts <button type="submit" name="delete" value="{{follower.id}}" class="delete_follower">Delete</button>
</div>
js:
$(".delete_followup").click(function(){
var $this = $(this);
$(this).find(".delete_follower").show();
});
I want to show the hidden button on clicking the delete_followup class.i TRIED WITH ABOVE jQuery but not working.
Or try .nextAll:
$(this).nextAll(".delete_follower").show();
Working here: http://jsfiddle.net/tw5XK/
The delete_follower element is not a decedent of delete_followup element, it is a sibling element so instead of find() you need to use siblings()
$(".delete_followup").click(function(){
var $this = $(this);
$this.siblings(".delete_follower").show();
});
You are trying to search downward into the div, when you already have a reference to the element you want. Making it way more complicated than it needs to be lol
$(".delete_followup").click(function(){
$(this).show();
});
Whenever you trigger off a click event, the actual element clicked on is passed through as the scope of the function. Since you are triggering off the click of ".delete_followup", that div is your element scope
Try this:
$(".delete_followup").click(function () {
if (this.checked) {
$(this).siblings(".delete_follower").show();
} else {
$(this).siblings(".delete_follower").hide();
}
});
Demo here
In my code I'm using a link button called updateLogButton which shows/hides a div. Because I use a link button everytime its clicked focus is moved to the beginning of the page. How can I stop this default behaviour?
Jquery snippet:
$('#updateLogText').hide();
$('#updateLogButton').click(function() {
if ($('#updateLogText').is(':visible')){
//hide div if content is visible
$('#updateLogText').fadeOut();
}else{
$('#updateLogText').fadeIn();
}
});
HTML code:
<tr>
<td>Update Log</td>
</tr>
<tr>
<td colspan="3" >
<div id="updateLogText" style="width:100%;">
<?php echo $data['updates']; ?>
</div>
</td>
</tr>
EDIT:
example of what i mean: http://jsfiddle.net/cF4Bb/7/
To prevent the default action when the link is clicked you can return false from the click handler or call event.preventDefault where event is the event object passed to the click handler.
$('#updateLogText').hide();
$('#updateLogButton').click(function(event) {
if ($('#updateLogText').is(':visible')){
//hide div if content is visible
$('#updateLogText').fadeOut();
}else{
$('#updateLogText').fadeIn();
}
event.preventDefault();
//or return false;
});
Add return false
$('#updateLogButton').click(function() {
if ($('#updateLogText').is(':visible')){
//hide div if content is visible
$('#updateLogText').fadeOut();
}else{
$('#updateLogText').fadeIn();
}
return false;
});
You can also try changing your href to:
Update Log
Return false from the one click event
$('#updateLogText').hide();
$('#updateLogButton').click(function() {
if ($('#updateLogText').is(':visible')){
//hide div if content is visible
$('#updateLogText').fadeOut();
}else{
$('#updateLogText').fadeIn();
}
return false;
});
Remove the href="#" from
<td><a **href="#"** id="updateLogButton">Update Log</a></td>
to
<td><a id="updateLogButton">Update Log</a></td>
note that this may remove the 'hyperlink' like text; which you can re-apply using css.
[EDIT: ADDED]
Alternatively you can use LinkButton instead as follows:
<asp:LinkButton id="btnLink" Text="Update Log" **onclick**="javascript:ShowHide(); return false;"/>
You will have to write your own javascript function. **Note: can't remember on top of my head whether it onclick or onclientclick but you get the idea.