I have a question, and I doubt it is possible. the question is as follows:
How can my onclick be executed without the anchor tag being activated?
The onclick will show the disclaimer message.
Sample code:
<a href="websiteurl.com">
<div id="container">
<div class="content-wrapper">
<div class="image">
<img src="...."/>
</div>
<div class="disclaimer-message">disclaimer text</div>
<div class="text-wrapper">
<p>Sample text</p><span onclick="this.parentNode.querySelector('div.disclaimer-message').classList.toggle('disclaimer-show');">?</span>
</div>
</div>
</div>
</a>
Thanks in advance :)
I would write a dedicated function to handle your click.
<span onclick="clickHandler">...</span>
See my click handler below. If you want to prevent the default behavior of a javascript event, which in the case of a click event, you could use e.preventDefault() and e.stopPropagation().
function clickHandler(e) {
e.preventDefault()
e.stopPropagation()
}
This will prevent the browser from following it's default behavior which is to follow that link redirect. e.stopPropagation() will stop the event from bubbling up to its parent, which in this case is the anchor element.
<a href="http://www.websiteurl.com">
<p>Sample text<p><span onclick="alert('hello');return false">try me</span>
</a>
Note that when using this approach you should always wrap your script in a try catch block because if your code throws an error the parent link will be clicked.
<a href="http://www.websiteurl.com">
<p>Sample text<p><span onclick="try {alert('hello'); } catch(e) {}; return false">try me</span>
</a>
To prevent the anchor link being invoked on click event :
Assign the click listener on the highest parent possible (right after anchor tag)
Prevent the event bubbling up to the anchor by invoking its preventDefault method
var container = document.querySelector('#container');
container.addEventListener('click', function(event) {
event.preventDefault();
var msgBlock = container.querySelector('.disclaimer-message');
msgBlock.classList.toggle('disclaimer-show');
msgBlock.classList.toggle('hide');
});
a {
text-decoration: none;
}
.disclaimer-show {
color: red;
font-weight: bold;
}
.hide {
display: none;
}
<a href="websiteurl.com">
<div id="container">
<div class="content-wrapper">
<div class="image">
<img src="...." />
</div>
<div class="disclaimer-message hide">disclaimer text</div>
<div class="text-wrapper">
<p>Sample text</p><span>?</span>
</div>
</div>
</div>
</a>
<a href="websiteurl.com">
<p>Sample text<p>
</a>
<span onclick="this.parentNode.querySelector('div.class-message').classList.toggle('class-show');">try me</span>
Thats the way you should do it as there is no point to hold span tag inside of anchor , "this.parentNode" targets anchor element ,so querySelector won't work unless u got ur div inside of anchor
Related
I am trying to show a dropdown when the gear-img div is clicked using jQuery but since it's wrapped inside an a tag, it ends up redirecting me to the url and I also want the whole div clickable. Please suggest a fix or a better way to achieve this.
<a href="http://www.google.com">
<div class="content">
<div class="gear-img"><img src="images/ic-settings-black-24-px.svg"></div>
<div class="dropdown"></div>
</div>
</a>
You could stop propagating the event onto the parent a tag :
$(".gear-img").click( function(event){
//you toggling code here....
event.preventDefault();
event.stopPropagation();
});
Add you clickable behaviour differently for every different-behaving div.
An element that is inline elements should not contain block elements.
Change code like this:
$(document).ready(function(){
$('.gear-img').click(function(){
$('.dropdown').toggle();
})
})
.dropdown {
display: none;
}
img {
width: 50px;
cursor: pointer;
margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
redirect to google
<div class="content">
<div class="gear-img"><img title="Show dropdown" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg"></div>
<div class="dropdown">Dropdown</div>
Because just adding an anchor (a link) doesnt make it work as you intend. It now does exactly what you told it to do; When you click it, it goes to Google.
You can drop the anchor add a little jQuery:
<div class="content">
<div class="gear-img"><img src="images/ic-settings-black-24-px.svg"></div>
<div class="dropdown"> A<br/> B<br/> B<br/> </div>
</div>
and then you can use a little code to toggle the list:
$('.content').on('click', '.gear-img', function(){
$(this).find('.dropdown').slideToggle();
})
try this one:
$(function(){
$('.gear-img img').on('click',function(e){
e.stopPropagation()
$('.dropdown ul li').toggle('show');
console.log('Image Clicked!');
});
$('a').on('click',function(e){
e.stopPropagation()
$('.gear-img img').click()
return false;
});
});
.show{
display:block;
}
.dropdown ul li{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://www.google.com">
Click Here!
<div class="content">
<div class="gear-img"><img src="https://indianflag.co.in/wp-content/uploads/2016/12/2.j"></div>
<div class="dropdown">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</a>
You can just do this.
Initially, keep your dropdown div display none.
On click of that image div, we can show the dropdown div.Please find the code and let me know if you need further help.
<a href="http://www.google.com">
</a>
<div class="content">
<div class="gear-img" onclick="fun()"><img src="images/ic-settings-black-24-px.svg">
</div>
<div id="dropdown" class="dropdown" style="display:none">
</div>
</div>
<script>
function fun()
{
var x=document.getElementById("dropdown");
x.style.display="block";
}
</script>
When the mouse click, I need to hide the link and show another div.
<div class="fetch-from-link">
<a href="#" class="test" onClick="$(this).parent().hide();">
Fetch from link
</a>
<div class="hello">Hello world</div>
</div>
I just use simple hide method. But how can I show my "hello" div after the link hide?
Since jQuery is used bind the event handler using it instead of ugly inline click handler.
You need to hide() the current element, then Class Selector ('.hello') can be used to display the other div.
jQuery(function($) {
$('.test').click(function(e) {
e.preventDefault();
$(this).hide();
$('.hello').show();
})
});
.hello {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fetch-from-link">
Fetch from link
<div class="hello">Hello world</div>
</div>
As per current HTML, you can use .next()
Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
jQuery(function($) {
$('.test').click(function(e) {
e.preventDefault();
$(this).hide().next().show();
})
});
You can use the following code:
$(function() {
$('.test').click(function() {
$('.test').hide();
$('.hello').show();
});
})
.hello {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fetch-from-link">
Fetch from link
<div class="hello">Hello world</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fetch-from-link">
<a href="#" class="test" onClick="$(this).parent().hide();$('.hello').show();">
Fetch from link
</a>
</div>
<div class="hello" style="display: none; ">Hello world</div>
You must move the div outside because you are hiding the div containing your "Hello world" text.
<div class="fetch-from-link">
<a href="#" class="test" onClick="$(this).hide().siblings('.hello,.second-class,.third-class').show();">
Fetch from link
</a>
<div class="hello">Hello world</div>
</div>
You are hiding the whole div containing both the elements. Hide link only.
I have an anchor text link that contains information that I need to parse:
<a href="javascript:parselink(this)">
<div class="calendar">
<div class='day'>8</div>
<div class="number">75</div>
</div>
</a>
<script>
function parselink(link){
alert(link.innerHtml);
}
</script>
However, I am not able to get the anchor text's innerHhtml.
You have a typo
innerHtml !== innerHTML
And use onclick, not href to trigger the event
function parselink(link){
alert(link.innerHTML);
}
<a href="#" onclick="parselink(this); return false;">
<div class="calendar">
<div class='day'>8</div>
<div class="number">75</div>
</div>
</a>
I have an html like this.I am trying to do a jquery trigger on a button click.Basically I just need to close the div when The button is clicked.
I have tried following code in button click using jquery but the div is not closing.Can anyone correct me
JS
$('.tags .alert-success .close').trigger(click);
HTML
<div class="sentiment-text">
<div class="wrapper">
<div class="key"></div>
<div class="text" <div class="tags alert-success">×<span class="noun">#</span><span class="noun">sed/span> <span class="noun">#</span><span class="noun">menshealth</span> </div></div>
<div class="clear-sentiment"></div>
</div>
</div>
This is what you need -- no space between the first two selectors -- .tags.alert-success. Both .tags and .alert-success are on the same element:
$('.tags.alert-success .close').trigger( 'click' );
//or $('.tags.alert-success .close').click();
And close the opening tag of .text div so that you have:
<div class="text"><div class="tags .......
I am trying to select the parent element .search-result-item and skip the h3 tag in it and btn-grey class from selection. my code is here
$('div.search-result-item:not(h3 .btn-grey)').click(function(e){
console.log('1');
});
but it selects h3 and btn-grey also what i doing wrong?
my HTML is here
<div data-id="52c53ccfaea0837f318b470c" class="search-result-item ">
<div>
<div class="search_result">
<div class="picture"><img width="195" height="130" src="/images/not_available.png" alt=""></div>
<div class="info">
<h3>
<a href="/course-detail/masters/management-with-human-resource-management/full-time/university-of-chester-faculty-of-business-enterprise-and-lifelong-learning/uk/52c53ccfaea0837f318b470c" title="Management with Human Resource Management">
Management with Human Resource Management </a>
</h3>
<p>
<strong>Entry Requirements: </strong>IELTS : 6.5
</p>
<a data-id="52c53ccfaea0837f318b470c" class="request-info" title="Request Info">
<button class="btn btn-yellow">Request Info</button>
</a>
<a class="btn btn-grey" href="/course-detail/masters/management-with-human-resource-management/full-time/university-of-chester-faculty-of-business-enterprise-and-lifelong-learning/uk/52c53ccfaea0837f318b470c" title="Course Details">
Course Details
</a>
</div>
</div><!-- .search_result -->
</div>
</div>
Try this instead. Do the filtering after the event has fired by checking what element fired the event:
$('div.search-result-item').click(function(e){
if (!$(e.target).is('h3,.btn-grey')) {
console.log('1');
}
});
You're misinterpreting what is going on. When you bind an even to a parent element, all events that happen on child elements will bubble to the parent and trigger the event on the parent. Using :not() will not change that fact. You instead need to test the event.target inside the event handler to ensure that the target element was not one of the elements that you didn't want to trigger the event.
$('div.search-result-item').click(function(e){
if ( !$(e.target).is("h3,.btn-grey") ) {
console.log('1');
}
});