I have a div that hides whenever you click outside of it but I'm having some trouble getting certain links inside the div to work (and not hide the div).
$(document).click(function() {
fav.hide();
});
theDiv.click(function(e) {
e.stopPropagation();
});
That is what I have for the whole clicking outside and closing event. Heres the thing: I have two types of links in my div, one regular link and another which is a javascript one. The regular one redirects OK but the javascript one doesn't do anything.
Could somebody help me out? Thanks.
EDIT:
Here are the bits of my code that might help out
var fav = $('#favorites');
// Open & close button
$('#favorites_a').click(function(e) {
e.stopPropagation();
e.preventDefault();
fav.toggle();
});
$('a.c',fav).live('click', function(e) {
alert('hey');
});
$(document).click(function() {
fav.hide();
});
fav.click(function(e) {
e.stopPropagation();
});
HTML (built after page load):
<div id="favorites">
<div class="wrap">
<ul><li>AB</li></ul>
</div>
</div>
This could be a problem with the live() click event handler. When you use live the event handler is actually attached to the document. So the event needs to bubble up to the document, but your click event handler on fav prevents bubbling up.
It works with delegate though:
fav.delegate('a.c', 'click', function(e) {
alert('hey');
});
Here, the event handler is added to fav.
DEMO
I think your code for fav is preventing the 'B' link from working. Instead of .live(), try:
$('a.c').click(function() { ... });
instead.
Related
I have several DIV of the following kind on my page:
<div class='entry'>
This is a statement
<a title="Search #travel" class="app-context-link" href="">#travel</a>
</div>
When a DIV of class .entry is clicked I trigger the following:
$(".entry").on('click', function(e) {
console.log("DIV Clicked");
});
When a link of the class .app-context-link is clicked I trigger the following:
var context_links = document.getElementsByClassName('app-context-link');
for (var k=0;k<context_links.length;++k) {
context_links[k].addEventListener('click', function(e) {
console.log("The context link inside DIV is clicked");
});
}
The question:
Right now when I click on the app-context-link both actions seem to be triggered: for the DIV (because a .click event is detected) and for the link (because there's an event listener on a link of that class).
How do I make it that if the link is clicked the DIV on click jQuery is not triggered?
I tried several possibilities, nothing worked. Also I would prefer not to reorganize the code too much, but simply add some directive in the on click jQuery part so that it detects if a link was clicked and does not do what it would normally do if the DIV was clicked.
Thank you!
you can use like this
$(".entry").on('click', function(e) {
e.stopPropagation();
alert($(this).prop("tagName"));
});
$(".entry a").on('click', function(e) {
e.preventDefault();
e.stopPropagation();
alert($(this).prop("tagName"));
});
DEMO
Use stop propagation :
context_links[k].addEventListener('click', function(e) {
e.stopPropagation(); //Here
console.log("The context link inside DIV is clicked");
});
This will stop the click event from bubbling, so when you click on the a, click events of its ancestor will not trigger.
I am new to JQuery Development. I am facing a issue with the onblur event, while i am trying to make a custom menu for my website. could any one help me with this please.
Please find ths JS fiddle JS Fiddle
$(document).ready(function () {
$('#showmenu').click(function (e) {
e.preventDefault();
this.focus();
$('#serviceMenu').slideToggle("fast");
$('#Contact').hide();
});
$('#showmenu').blur(function (e) {
$('#serviceMenu').hide();
});
});
The issue is that the show/hide div mechanism is based on a <a> tag. on clicking <a> the menu is toggling fine. i also want menu to toggle, when the user clicks anywhere outside the menu and the appearing div. In the fiddle i have added onblur() event for the anchor, that is making my sub links inside the div trigger onblur() event of main anchor, and hiding the menu. I tried to block event.propagation(), but its not working for me.
The problem here is, that the blur event is called, BEFORE you click on a#serviceMenu
You also should learn how the event-propagation works: Direct and delegated events
I updated your fiddle (with some comments): http://jsfiddle.net/M4LJh/7/
$(document).ready(function () {
$('#showmenu').on('click', function (e) {
this.focus();
$('#serviceMenu').slideToggle("fast");
$('#Contact').hide();
return false;
});
// prevent clickEvent to bubble up to #showmenu
$('#serviceMenu a').on('click', function(e){e.stopPropagation();});
// hide #serviceMenu on bodyClick
// - anywhere but an element with propagation stopped event
$('body').on('click', function (e) {
$('#serviceMenu').hide();
return false; // e.stopPropagtaion(); + e.preventDefault();
});
});
my code looks like this:
<div class="disabledClickevent">
<ul>
<li><a>link1</a></li>
<li><a>link2</a></li>
</ul>
</div>
the div has a click event that gets disabled with return false;
my problem is that this also disables the <a> links
$(document).on('click','.disabledClickevent' function(e) {
if( e.target !== this )
//clicked out side
return;
//clicked inside
});
I would do this:
$(".disabledClickevent").on("click", ":not(a)", function(e) {
//do stuff with your div
});
This excludes a from the click event.
Could be a solution:
$('.disabledClickevent').on('click',function(e){
if($(e.target).is(':not(a)'))
return false;
});
Or set click handler to links:
$('.disabledClickevent a').click(function(e){
e.stopPropagation();
});
you can use the :not() selector in jQuery
check this link out http://api.jquery.com/not-selector/
hope this helps.
If you don't plan to add new "disabledClickevent" divs to the page via Javascript, you could just do this:
$('.disabledClickevent').click(function() {...});
or
$('.disabledClickevent').bind('click', function() {...});
That attaches the event only to the already-existing div, without doing any sort of delegation, so the links will just work normally as you want them to.
To be clear, this is only a viable solution if all of the "disabledClickevent" divs that you plan to have already exist on the page at the time that you bind the event.
Part of a bigger solution, I have accordion-type jQuery control that implements headers as jQuery toggle buttons. Each header also has to have a help balloon. In nutshell, the setup is similar to that posted at this jsFiddle .
<div id="button1">Go to main action <span id="span1" style="color:blue">Help</span> </div>
<div id="out"/>
$('#button1').button().click(function(){
$('#out').text('Button clicked');
});
$('#span1').click(function(){
$('#out').text('Span clicked');
});
Is that possible to make it so I can click on the Help span, which is located inside the button div? Or, will button always get the events for all of its content preventing inside elements from getting click events?
Thank you.
Your event first fires on span and then also on button. You can prevent the event to be fired on parent by stopPropagation() method. Also, return false do the same.
Fiddle for demonstration
$('#span1').click(function(e){
$('#out').text('Span clicked');
e.stopPropagation();
});
or:
$('#span1').click(function(){
$('#out').text('Span clicked');
return false;
});
jSfiddle http://jsfiddle.net/kxntf/5/
i have an menu with some values and i got someting hidden and while click on more button it shows like google more menu... if it is clicked out it is not hiding till the more menu is clicked once again
More<small>▼</small><div class="more list" id="one" style="display:none">test <span style="color:#329">|</span> test1 <span style="color:#169">|</span> test4</div></div>
Script:
function toggle(one)
{
var o=document.getElementById(one);
o.style.display=(o.style.display=='none')?'block':'none';
}
how to make it close while the mosuse clicks on any other place other than the menus
Try using the onblur event.
I see you've tagged this with jQuery, if that is an option, you can clear up the link a bit, like this:
More<small>▼</small>
And use unobtrusive script combined with event bubbling to your advantage, like this:
$(function() {
$(".more_link").click(function(e) {
$(this).next(".more").toggle();
e.stopPropagation();
});
$(".more").click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$(".more").hide();
});
});
You can test it out here, this only closes the menu if you clicked neither the menu of the toggle, e.g. clicking one of the test links will not close it. If you want it to, just remove the $(".more").click(function(e) { e.stopPropagation(); }); portion.
It uses event.stopPropagation() to stop the click from bubbling up to document, which if happens (and would if you clicked anything else) triggers its click handler, closing all the .more elements.
I wouldn't use onBlur because it's not a good accessibility approach (for example if the user is using tab to navigate the page).
Look at this solution instead:
jQuery click event for document but ignore a div
Typically, I let the event bubble up to the 'body' or 'html' doc and check if the target is what i want (and/or isn't contained within what i want). If the event target is not contained within your menu, then perform your desired operation (in this case, hide the div).
i.e.
jQuery(document).ready(function(){
jQuery("html").bind("click", function(evt){
var $target = jQuery(evt.target);
var shouldShowMenu = $target.hasClass("menu_toggle");
shouldShowMenu |= $target.parents(".menu_toggle, .more_list").length;
if(!shouldShowMenu)jQuery(".more_list").hide();
});
});
NOTE: your markup would needs to be extended such that the "more" href becomes has a class attribute, class="menu_toggle"