JavaScript IF statement problem - javascript

I have a problem writing an if statement, due to my lack of programing skills.
there's the code :
$("div.footerMenu li div.onScreen").click(
function(e) { e.stopPropagation(); e.preventDefault(); return false; }
);
Inside this div I have simple <a></a> links. And the problem is, when i click on that link, nothing happens. I'm trying to make a function, that would not execute that function(e) if the target of .click would be an <a></a> tag. Is there a simple way to do that?

You problem is that because you're link is inside the div, your code is blocking the click event, hence why nothing happens. You could try this:
$("div.footerMenu li div.onScreen").click(function(e) {
if(e.target.tagName.toLowerCase() != 'a') {
e.stopPropagation();
e.preventDefault();
return false;
}
});
I'm using .toLowerCase() because I'm not 100% the tagName will always be uppercase in all browsers. Just a sanity check.

I had a similar problem and here is the solution that works :)
$("div.footerMenu li div.onScreen").click(function(e) {
if( !( $(e.target).is('a') ) )
e.stopPropagation(); e.preventDefault(); return false;
}
);

Yup, very easy
if (e.target.nodeName !== "A") {
// your code here
}

You will need to check if the node has tagName == 'A'
if (this.tagName == 'A')
"this" should reference to the node being clicked, otherwise lookup e.target or e.targetSrc (don't know the jQuery equivalent)

When you click on an element, only events it will be running. But not events atached on parent elements.
You need to change your selector to match all child elements.
$("div.footerMenu li div.onScreen > *")
$("div.footerMenu li div.onScreen > a")

Rather than check if target was an a (to me, it's a bit messy), I'd prefer to separate it out and handle the links separately. By using e.stopPropagation only, you'll be able to click the link and have whatever action you want on it as well as preventing the event from bubbling up to the div.
$("div").click(function(e){
alert('You clicked me, I am the div!');
});
$("div a").click(function(e){
// Allows the link to be clicked but prevents
// the event from bubbling up to the div
e.stopPropagation();
});
Example: http://jsfiddle.net/jonathon/s2TxS/

Related

jquery function call when clicking blank space

I need to know how to call the function if some one click in blank space in the jsp page.
I tried the following code but it's not working how I want.
Can any one tell me how to do this?
jQuery("*:not(select)").click(function(){
alert("clck");
//some code here
});
Here I tried whenever I click out side the select box the function will call.
If I click the select box it won't call, but this function is called all the time.
Why is this happening?
I'd probably do it something like this:
$(document).on("click", function(e) {
if (e.target === document || e.target.tagName === "BODY" || e.target.tagName === "HTML") {
// Clicked on blank space
}
});
That hooks the click event on document and then checks to see if the click originated on the document (or the body or html elements). If it did, the user clicked in "blank space" (e.g., not on some other element within the document).
Not sure will work in all browsers but in chrome.
$('body').click( function (e) {
if ( e.target == this )
alert('clck');
});
If you want a special item to be not included in the click try this
$('#itemtobeexcluded').on('click', function(e) {
e.stopPropagation();
});
Then for whole document:
$(document).on('click', function (e) {
// function body
});
may be this will work
$(document).on('click', function (e) {
alert('clck');
});

Fire event only when clicking on an element, and not on its children

If I bind a click handler to the body element, when I click anything on the page the event is triggered. I can check the event.target on every click:
$("body").on("click", function(event) {
if (event.target.tagName == "BODY") {
...
}
});
but that seem a bit overkill. Is there a way to trigger the event only when clicking the blank area of the body itself?
You can use the eventPhase property of event. A value of 2 means that the event is currently triggering the target element:
$("body").on("click", function(event) {
//Cancel if not at target
if (event.eventPhase != 2) return;
//Other Code Here
});
Fiddle Here: http://jsfiddle.net/o0yptmmp/
You should put an
event.stopPropagation()
on all children you want to not bubble up.
jQuery Docs: http://api.jquery.com/event.stoppropagation/.
You can do it if you check on every click if the element clicked has a body parent. If the condition is false, you are clicking the body:
$("body").on("click", function(event) {
if ($(this).parents('body').length == 0) {
//Do something
}
});
In my opinion it's not a good practice, but it depends on your code and project.

Javascript hide element (when clicked outside) with certain conditions

So there is much questions here about hiding div when you clicking outside of it. But I have one thing, there is a div(accounts-edit-table-name-edit) which showing hidden div(account-edit-group) on click first. And then - if I will click somewhere else out of the div(account-edit-group) - it must hide. Here is my code where I am trying to do two different conditions (OR):
$(document).click(function(event) {
if($(event.target).parents().index($('.account-edit-group')) == -1 || $(event.target).parents().index($('.accounts-edit-table-name-edit')) == -1)
{
if($('.account-edit-group').is(":visible"))
{
$('.account-edit-group').removeClass('acc-edit-f');
alert("hiding")
}
}
});
HTML:
<div class="accounts-edit-table-name-edit">"button"</div>
<div class="account-edit-group">block</div>
(class "acc-edit-f" just contains "display: block")
Well, if I will click on the div with class "accounts-edit-table-name-edit" - system will immediately show me alert("hiding") though it must look through the conditions and ignore that. Is there any ways to fix this?
see the jsfiddle if it is what you want :
http://jsfiddle.net/5E6C6/2/
$(event.target).parents().index($('.account-edit-group')) //always return -1
$(event.target).parents().index($('.accounts-edit-table-name-edit')) // this too
That's because parents doesn't include the first element, which is e.target.
Here what you could do :
if(!$(event.target).closest('.account-edit-group, .accounts-edit-table-name-edit').length)
try using .hide() instead of removeclass
$( ".account-edit-group" ).hide();
Here is what you need:
add the element that is shown/hidden inside the button
stop event propagation when one of the two elements are clicked
bind onclick event on the document and hide all child elements
here is a working example i wrote for you:
http://jsfiddle.net/T2b4z/2/
$(document).click(function(event) {
var clickedElement = $(event.target);
if (clickedElement.hasClass('accounts-edit-table-name-edit') || clickedElement.parents().hasClass('accounts-edit-table-name-edit')) {
$('.account-edit-group').removeClass('acc-edit-f');
return false;
}else {
$('.account-edit-group').addClass('acc-edit-f');
}
});

prevent click event from element but not from <a> children

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.

Click event of 'a' tag in jquery

I need to trigger click events of "a" tags which are in "deletable" class. I saw some similar question in SO, but following code doesn't work for me. What i'm trying to do is to delete relevant <li> from <ul>.
$(document).ready(function () {
$('.deletable').live("click", function () {
alert("test"); // Debug
// Code to remove this <li> from <ul>
});
});
<form ...>
<ul>
<li>OneDelete</li>
<li>TwoDelete</li>
<li>ThreeDelete</li>
</ul>
</form>
I assume i'm using incorrect object hierarchy inside $('...') tag. But i don't have enough js/jquery/DOM knowladge to solve this problem. please help.
EDIT
Thanks for the answers, but none of them works for me. Actually i'm adding <li>s dynamically. There maybe a problem. Please check,
#sps - a listbox
#add - a button
#splist - another listbox
#remove - a button
$(document).ready(function() {
$('#add').click(function(e) {
var selectedOpts = $('#sps option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$('#splist').append($(selectedOpts).clone());
$('ul').append('<li>' + selectedOpts.text() + 'Remove' + '</li>');
e.preventDefault();
});
$('#remove').click(function(e) {
var selectedOpts = $('#splist option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$(selectedOpts).remove();
e.preventDefault();
});
});
The .live() method of jQuery has been deprecated. You can get similar functionality using $('body') and delegating to .deletable like I did in the following code:
$('body').on('click', '.deletable', function(e){
e.preventDefault();
// this is the li that was clicked
$(this).parent().remove();
});
The preventDefault method is used to keep the link from loading a new page should there be something targeted in the href attribute. If you keep the same HTML structure as you have in your example, then you can simply take the anchor element (this) and grab the parent, then remove it from the DOM.
It would be wise to, instead of using $('body'), target the container for the .deletable anchors, which, in this case, would be $('ul'). The function would look like this:
$('ul').on('click', '.deletable', function(e){
e.preventDefault();
// this is the li that was clicked
$(this).parent().remove();
});
Using $('body') means that every event on the page would have to be filtered to see if it originated from a .deletable anchor. By scoping it to the ul preceding your li's, you limit the number of times your function is called increasing performance.
Some things first: if you're using jQuery 1.9, the .live() function is not anymore supported. Versions prior, that particular function is deprecated anyway, so you shouldn't really use it.
That being said, your syntax looks about correct. So I'm assuming that it's your hierarchy inside the handler function that's incorrect.
Something like this should work if you're trying to delete the parent <li>:
$('.deletable').on('click', function (e) {
// since you're working with a link, it may be doing wonky default browser stuff
// so disable that for now
e.preventDefault();
// then we delete the parent li here:
$(this).parent('li').remove();
});
If you really want to make that into a delegate signature, something like this should work:
$('form').on('click', '.deletable', function (e) {
// same banana
});
you can use $('a.deletable') selector ... this finds the <a> with class deletable.
u can go through the on delegate events too.. here is the docs
try this
$('a.deletable').on("click",function(){
alert("test"); // Debug
// Code to remove this <li> from <ul>
$(this).parent("li").remove();
});
if in case your <li> is added dynamically..
$(document).on("click",'a.deletable',function(){ .... //even more better if u replace the document with closest elements to a.deletable ..like $(form)
live() is depricated..
$('a.deletable').live("click",function(){
alert("test"); // Debug
$(this).parent('li').remove();
});

Categories