We Keep Coding

Prevent Parent Click(a) Event When Child Element(input) is Clicked [duplicate]

This question already has answers here:
How to consume button click inside <a> tag to prevent link being followed?
(5 answers)
Closed 4 years ago.
I have a a tag which wraps and have some content inside. When the box clicked it redirect to some other page. At the same time I have input type="button" element inside the a wrapper. And this button has to redirect to a separate page when clicked.
So far I have tried some jquery methods and all of them lead me to the failure.
I formed a sample structure here.
$(".wrapper").click(function(e) {
if (e.target.className == "btn") {
e.preventDefault();
var link = $(this).find(".btn").attr('data-link');
console.log(link);
//window.location.href = link;
}
});
a.wrapper {
display: inline-block;
height: 100px;
width: 100px;
border: 1px solid #333;
background: #ddd;
text-align: center;
}
a.wrapper * {
display: inline-block;
padding: 5px;
margin: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="google.com" class="wrapper">
<span>some content</span>
<input type="button" class="btn" value="click me" data-link="yahoo.com" />
</a>
How can I prevent the a tag click when I click the button?

I do not understand your goal?
an a is a text link while a button is a HTML element and both send ya somewhere. Why in the world would ya mix them together?
If you are thinking you need to for the .wrapper then you need to understand that CSS is often time better bigger and more specialized.
A class for btn is so generic that many web developers style an entire brand with it then add flavor for each with id's
If this is truly a special button try using an #id with the css.
<form>
<span>some content</span>
<button type="submit" class="btn" id="special_button" formaction="https://www.yahoo.com" >
</form>
CSS add
#special_button {
-webkit-transition-duration: 0.4s; /* Safari add all the browsers your targeting */
transition-duration: 0.4s;
}
#special_button:hover {
background-color: #4CAF50; /* Green */
color: white;
}

Re-closing hidden content

I have a large document where this is implemented A LOT. I am hoping there is a way to simply edit the JavaScript somehow, so I have less editing.
Basically, clicking on a line of text opens the hidden text beneath it. You can close and re-hide the text by clicking on that same line of text... THAT is the ONLY way I want it to operate. As it is now, you can click on the hidden text anywhere and that will also close it. That is becoming a problem because I have interactive content in the hidden text area, and an accidental click in the wrong area will collapse it all.
.results_container {
cursor: pointer;
line-height: 21px;
}
.hidden>span {
display: none;
}
.visible>span {
cursor: default;
display: block;
line-height: 18px;
background: #f5f5f5;
padding: 15px;
margin: 10px 0px 32px 25px;
}
<div class="results_container">
Click Me to show hidden content
<span>I am hidden in span tags. You can close me by clicking anywhere in this text, however, I ONLY want to close the same way I opened; by clicking "Click Me to show hidden content.</span>
</div>
Full Fiddle
NOTE: On the fiddle, my JavaScript is at the end, under the pasted-in jQuery... sorry, that's the only way I could get it to work.

See the fiddle or below snippet:
https://jsfiddle.net/ejbdb128/6/
By checking against "this" in regards to the parent selector, you can filter out when you click on the child "span" element. I should note a caveat to this is if you click anywhere outside the "span" and in the div element, it will hide the span, even if you don't click just on the "Click Me" text..
/* SCRIPT for HIDDEN DESCRIPTIONS for RESULTS */
$(document).ready(function() {
"use strict";
$('.results_container').addClass("hidden");
$('.results_container').click(function(e) {
if (e.target != this) {
return false;
}
var $this = $(this);
if ($this.hasClass("hidden")) {
$(this).removeClass("hidden").addClass("visible");
} else {
$(this).removeClass("visible").addClass("hidden");
}
});
});
.results_container {
cursor: pointer;
line-height: 21px;
}
.hidden>span {
display: none;
}
.visible>span {
cursor: default;
display: block;
line-height: 18px;
background: #f5f5f5;
padding: 15px;
margin: 10px 0px 32px 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results_container">
Click Me to show hidden content
<span>I am hidden in span tags. You can close me by clicking anywhere in this text, however, I ONLY want to close the same way I opened; by clicking "Click Me to show hidden content.</span>
</div>

Add the click handler to to an external event and use that to hide . By the way, jQuery has built in functions hide and toggle for hiding elements.
HTML:
<div class="results_container">
<span class="clickme">Click Me to show hidden content</span>
<span class="hideme">
I am hidden in span tags. You can close me by clicking anywhere in this text, however, I ONLY want to close the same way I opened; by clicking "Click Me to show hidden content.
</span>
Javscript:
$(document).ready(function(){
"use strict";
$('.hideme').hide();
$('.clickme').on('click', function() {
$('.hideme').toggle();
});
});
Fiddle here: https://jsfiddle.net/fLj6c4q7/

Show element based on URL

I am working on one task where I need to hide an element and redirect it to another URL when user click on a div.
If user directly go to that URL then it should not hide element as it has not clicked yet.
I have manage to do FIRST point.
Element will be on both pages.
My logic is here but it is not working:
flag = false;
$(document).ready(function() {
$("div.main").click(function() {
flag==true;
$(".notired").hide();
});
if ((document.location.href.indexOf("xyz") > 0) && (flag==true))
$(".notired").hide();
});
HTML:
<div class="main">
<a href="xyz.com" title="Click here">
<img src="../images/notif.png">
</a>
<span class="notired">';
echo $count;
echo '
</span>
</div>
CSS:
.notired
{
display: inline-block;
background: #E43C03;
text-align: center;
color: #FFF;
font-size: 12px;
font-weight: bold;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
width: 14px;
z-index: 1;
margin-left:-9px;
}
.main
{
width:50px;
}
Looking for the solution.

Make sure your element is hidden by default, then:
check if the current URL matches the one you need
if it does, then do nothing as you want to keep it hidden
if it doesn't then show it
and if i understood correctly you need always to hide on the click function, then simply put the .hide() inside the event handler
$(document).ready(function() {
if(window.location.hash) {
// The URL contains the hash sent when clicked on button
$(".notired").hide();
}
});
and here
<a href="xyz.com#clicked" title="Click here">

How do I link to a JavaScript function?

I have JavaScript that makes it so that when you click on a string of text it creates a div that slides down and expands an area bellow it to show more information. I want to be able to have a link on a different page of my website that when clicked takes you to the page with the string of text ALREADY clicked on and expanded. How would I do this?
JSFidldle: http://jsfiddle.net/hr07tn16/2/
JavaScript:
$('.moreInfo').on('click', function(){
var target = $(this).data('target');
$('.expandable').not('.' + target).slideUp(500, function(){
$('.' + target).slideDown(500, function(){
});
});
});
HTML
<div class="moreInfo" data-target="red">More Info</div>
<div class="moreInfo" data-target="green">More Info</div>
<div class="expandable red" style="display: none;">RED</div>
<div class="expandable green" style="display: none;">GREEN</div>
CSS:
.expandable {
width: 997px;
height: 300px;
}
.red {
color: white;
position: relative;
top: 380px;
border: 1px solid rgba(0,0,0,.1);
}
.green {
color: white;
position: relative;
top: 380px;
border: 1px solid rgba(0,0,0,.1);
}

You could add a hash to the link on your other page and, if the hash is present trigger the click. You could also use a flag to use the animation or not depending on whether is an automatic trigger or a manual one.

One thing you can try is redirecting to that page with a POST variable set indicating the element you would like expanded. Then on the page being directed to, have an onLoad() function which checks if the variable is set and then does what you want if it is.
onLoad()

I need these buttons to control which div is showing or "on top"

I have these buttons on the side of my page, and a main content area taking up the better part of the page.
What I am trying to do is get the button I click to change the main content to a div containing the corresponding information. This is very hard to find, perhaps because I am searching by the wrong terms, and I have covered a good portion of stackoverflow without much luck.
I have though about absolutely positioning the divs and using a script to change the z-index of the the divs to the highest amount using a "=+1" type situation, but I could see that getting messy.
I have considered adapting a script I have that replaces part of an image file name in order to change a main picture on a page to a larger version of the image corresponding to a thumb name, though this script targets file names so it isn't going well.
I have also tried something along the lines of:
"id of button" onclick function = "main content class" change id to "corresponding div"
only in javascript talk, and this isn't working at all so I can only assume that I am either looking at it wrong or I have some messed up in the code.
$('#tabhead1').click(function() {
document.getElementByClassName("maintab").id = "tabs1";
});
This is driving me crazy and I would really appreciate some ideas. I tried to leave it free formed so that noone gets hung up on anyone solution.
**** Just to clarify, I have 5 divs id'd at #tabhead1, #tabhead2, #tabhead3, etc. and 5 content divs classed as .maintab, and id'd as tabs1, tabs2, tabs3, etc. I need the first content div to show automatically, and for that div to change based on the button clicked. at the moment all content divs are set to display: none; except the first one.

For each button, add a data attribute related to the corresponding <div>
for example
<button id="tabhead1" data-content="tabs1" >first Tab</button>
apply a common class for the tabs, for example .tab
Then you can do the following
$('button').click(function(){
var contentId = $(this).data('content'); // get the id of corresponding tab
$('.tab').hide(); // hide all tabs
$('#'+contentId).show(); //show the corresponding tab
});

You are using getElementbyClassName which does not exists. Use:
document.getElementsByClassName("maintab")[0].id = "tabs1";
// Get all elements to match classname + get first element from array
And for the rest, I don't know why you want to add id with JS? Why not just add them to your HTML?

Try this
$('#tabhead1').click(function() {
// get element with class 'maintab' and replace its content with that of another tab
$(".maintab").html($(".tabs1").html());
});

To expand a little on the demo I posted in the comments earlier:
This uses a method very similar to #tilwin-joy, so I guess we were of like mindedness. There are a couple of small differences that I would point out:
jQuery:
$('button').on('click', function () {
var button = $(this);
var target = button.data('target');
button.prop('disabled', true).siblings().prop('disabled', false);
$(target).show('slow').siblings().hide();
});
This uses siblings to hide the other content (one less pass at the DOM).
I suggest just setting your data value with the id hash in the markup, I think it's a bit clearer to read and follow (IMHO) in both the script and markup.
This script also sets the current button to be disabled when clicked. The benefit of this is that you can use the disabled property to style up your buttons, and even if you don't style them it gives a visual cue to the user as to which tab content is currently displayed. Check out the demo to see how this can be used for styling purposes.
HTML: (I stripped some of the unneeded ids from what you described as your markup).
<div class="tabhead">
<button data-target="#tabs1" disabled="true">Content 1</button>
<button data-target="#tabs2">Content 2</button>
<button data-target="#tabs3">Content 3</button>
<button data-target="#tabs4">Content 4</button>
<button data-target="#tabs5">Content 5</button>
</div>
<div class="maintab">
<div id="tabs1">
<img src="http://placehold.it/350/e8117f/fff&text=Image+1" alt="Image 1" />
<p>This is the content of tabs1.</p>
</div>
<div id="tabs2">
<img src="http://placehold.it/350/9acd32/fff&text=Image+2" alt="Image 2" />
<p>This is the content of tabs2.</p>
</div>
<div id="tabs3">
<img src="http://placehold.it/350/9400d3/fff&text=Image+3" alt="Image 3" />
<p>This is the content of tabs3.</p>
</div>
<div id="tabs4">
<img src="http://placehold.it/350/ffd700/fff&text=Image+4" alt="Image 4" />
<p>This is the content of tabs4.</p>
</div>
<div id="tabs5">
<img src="http://placehold.it/350/1e90ff/fff&text=Image+5" alt="Image 5" />
<p>This is the content of tabs5.</p>
</div>
</div>
CSS: Not needed - just to give you an idea of how you can style the elements to look like tabs.
/*This sets all but the first tab to hidden when the page is loaded*/
.maintab>div:not(:first-child) {
display: none;
}
/*The rest is just to style the elements to look like tabs*/
body {
background-color: #eaeaea;
}
.maintab, .tabhead {
text-align: center;
margin:0 20px;
font-family: sans-serif;
}
.maintab {
border: 1px solid #1e90ff;
border-top: none;
padding-top: 20px;
background-color: #fff;
}
.tabhead {
border-bottom: 1px solid #1e90ff;
position: relative;
margin-top: 20px;
}
button {
background-color: #ccc;
padding: 10px;
border: 1px solid #999;
border-bottom: none;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #999;
font-size: 14px;
cursor: pointer;
position: relative;
top: 2px;
}
button:disabled {
background-color: #fff;
border-color: #1e90ff;
color: #1e90ff;
top: 3px;
padding-top: 11px;
cursor: not-allowed;
z-index: 10;
}