We Keep Coding

JQuery anchor click function

I am trying a way to click a anchor tag using Jquery which is inside multiple div.
Below is my code:
<div class="mainDiv">
<div id="secondDiv" class="check">
<div class="iteratorDiv1" id="id1">
link text
</div>
<div class="iteratorDiv2" id="id2">
link text
</div>
<div class="iteratorDiv3" id="id3">
link text
</div>
<div class="iteratorDiv4" id="id4">
link text
</div>
</div>
</div>
Now if i do something like this
$(".iteratorDiv1 a").live('click',function(e)
{
alert("hey working");
});
But using this approach i will have to write this function for iteratorDiv2,iteratorDiv3 and iteratorDiv4 also.
Is there any way i can identify the anchor click from the mainDiv something like below. This did not work though.
$(".mainDiv a").live('click',function(e)
{
alert("hey working");
});
I am just trying to prevent repeatative coding. Any guidance.

Please check the following jsFiddle:
http://jsfiddle.net/amoolya93/1xL9od85/3/
Your code works fine until Jquery version 1.8.3 .For later versions, please use the following:
$('.mainDiv a').on('click',function(e)
{ alert("hey working");
});

I just did some test here, and seem to work.
You might tell jQuery where exactly your "a" is, so you can try something like this:
$(".mainDiv div > a").on("click", function () {
alert("Hey it's working");
});
or
$(".mainDiv a").on("click", function () {
alert("Hey it's working");
});

$("a").on('click',function(e)
{
var parent = $(this).parent();
alert(parent.attr(class)) ;
});
Use .parent() method to get parent of any link you clicked.

Hiding a DIV by click on another DIV

I have a 'div' tag( by id=go) and write a script which i click on div, then another div (by id=example) will be shown, and show some data:
this is my div :
<div id="go" style="position: relative">Click</div>
<div id="example" style="position: relative"></div>
and the script:
$("#go").click(function () {
$("#example").fadeIn(1200);
$("#count").text('');
setInterval(
function () {
p(); count();
}, 8000);
});
and i want when i click on div(by id= go) agin the div (with id=example) be hide , How can i improve my script to do it?

You can use fadeToggle() to toggle between fadeIn() and fadeOut() here:
$("#example").fadeToggle(1200);
Fiddle Demo

Did you try .toggle()?
Reference is at jQuery docs. AFAIK it does all you need - including animation.

Use .toggle(). Check this
$("#example").hide();
$("#go").click(function () {
$("#example").toggle('slow');
});
DEMO

How to make the js function "onClick" work only on the container div?

I got a problem with the onClick function. I have to set
display: none;
in a css container div when the user clicks on it, but not when he clicks on the divs which are in the container.
<div id="msg_background" onclick="javascript:closemsg();">
<div id="new_msg_cont">
</div>
</div>
So, i don't want that clicking on "new_msg_cont" the function still works.
Here's the js:
function closemsg() {
document.getElementById('cont').style.height='';
document.getElementById('cont').style.overflow='';
document.getElementById('cont').style.position='';
document.getElementById('msg_background').style.display='none';
}
Thanks in advance.

This is called "bubbling" where the inner elements event 'bubbles' up to the parent element.
You can cancel this with event.stopPropagation():
Inline script
<div onclick="event.stopPropagation();" id="new_msg_cont"></div>
jsFiddle
External script
div onclick="javascript:cancel(event);" id="new_msg_cont"></div>
javascript:
function cancel(e)
{
e.stopPropagation();
}
jsFiddle

try something like this
javascript
function closemsg(event) {
if(event.target.id == "msg_background" ){
alert('you cliked me');
document.getElementById('cont').style.height='';
document.getElementById('cont').style.overflow='';
document.getElementById('cont').style.position='';
document.getElementById('msg_background').style.display='none';
}
}
html
<div id="msg_background" onclick="closemsg(event);">
div1
<div id="new_msg_cont">
div2
</div>
</div>

Try this approach:
<div id="msg_background" onclick="javascript:closemsg(this);">
<div id="new_msg_cont">
... your code ...
</div>
</div>
JS CODE
function closemsg(ele) {
if(ele.id === 'msg_background'){
document.getElementById('cont').style.height='';
document.getElementById('cont').style.overflow='';
document.getElementById('cont').style.position='';
document.getElementById('msg_background').style.display='none';
}
}

Inside your function check out if the event was fired by your parent div:
if (ev.target.id == "msg_background")
{
//execute the contents of the closemsg function
}
(ev is the event parameter)
Working Demo: http://jsfiddle.net/kVuKA/1/

How to catch any click event in jquery [duplicate]

This question already has answers here:
jQuery click() event catch-all?
(2 answers)
Closed 9 years ago.
I have a button, when it's clicked, shows a div with images(like an emoticon panel of a chat) if I click it again the div hides, but what I want to do is:
If the div is already showed up and then I click any other thing of the page, I want to hide it. I tried this:
$("myBtn").click(function(){
// show div
});
$(document).click(function(){
// hide div
});
When "myBtn" is clicked, the div shows up and hide automatically. How could I fix it ?
Thank you for your time.

You could try the following:
$(document).on('click', function(evt) {
if(!$(evt.target).is('#my-id')) {
//Hide
}
});
UPDATE
Just so you can have a full working set:
$('#mybutton').on('click', function(evt) {
$('#mydiv').show();
return false;//Returning false prevents the event from continuing up the chain
});

At the same time you show your original <div>, add a new <div> to your page that has a style/css set like this:
.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 100;
}
Make sure the original <div> -- the one you want to be able to click on without closing it -- has a higher z-index, but everything else on the page has a lower z-index.
When you add the new div to your page, give it the .ui-widget-overlay class, and add a click handler to intercept clicks on that <div>. Adding the overlay div with the click handler looks like this:
$('<div class="ui-widget-overlay">')
.click(function() {
$('.ui-widget-overlay').remove();
$('selector-for-original-div').hide();
})
.appendTo('body');
The upshot of all this: You have two divs. The first is what you want to display and allow users to click in without closing it, the second is an invisible div underneath the first taking up the entire browser window so that if the user clicks anywhere but the upper div, it intercepts the click event. Inside that click event, you remove the hidden div and hide the original.

updated
Assuming that you have a class 'active' to the element when it shows, it would be:
$('html').click(function(e){
if(!$(e.target).attr("id") == "my-id") {
}
});

<script type="text/javascript">
$('body').click(function() {
if($("div").is(':visible')){
$("div").hide();
}
});
</script>
the $("div") selector here should be your div that is either has id or class for example: if the <div class="class" id="id"> then $("div") will be changed to $("div.class") or $("div#id")

<div class="slControlWrapper">
<div class="slControlLabel">
<asp:Label ID="lblSL" CssClass="lblSL" runat="server">Clickable Label</asp:Label>
</div>
<div class="slControlSeparator">
</div>
<div class="slControlDropDown">
</div>
<div id="wndSL">
This is the hidden content of my DIV Window
</div>
<div id="test">
I am for test click on me
</div>
</div>
$('.slControlLabel, .slControlDropDown').bind('click',function(event){
$('#wndSL').show();
event.stopPropagation();
});
$('html').click(function() {
$('#wndSL').hide();
});
#wndSL {
display:none; background-color: blue; height:500px; width:590px;
}
Have a gander here:
http://jsfiddle.net/nCZmz/26/

jQuery - If DIV class equals X, hide all other DIVs with a different class

I'm new with jQuery and fairly new to JS (a little knowledge) and I'm wanting to create a jQuery code.
Firstly, here is my HTML code:
<div id="user-controls">
<div class="choice" id="choice-all" onclick="showAll();">All</div>
<div class="choice" id="choice-asus" onclick="justASUS();">ASUS</div>
<div class="choice" id="choice-htc" onclick="justHTC();">HTC</div>
</div>
<div id="devices">
<div class="android asus">Nexus 7</div>
<div class="android htc">One S</div>
<div class="android htc">One X+</div>
<div class="android asus">Transformer Prime</div>
<div class="winph htc">Windows Phone 8X</div>
</div>
I'm wanting a jQuery code that would do the following:
If I click on the #choice-asus DIV, then all DIVs with the class .htc would be set to display="none"
If I click on the #choice-htc DIV, then all DIVs with the class .asus would be set to display="none"
If I click on the #choice-all DIV, then all DIVs would be set to display="inline-block" (this is also the default setting when the page first loads)
I've already tried the following code, but it doesn't do anything.
$(document).ready(function(){
$("#choice-htc").click(function(){
$(".htc").hide();
})
});
Thank you for any help,
Dylan.

So many choices :) http://jsfiddle.net/9RtUE/
$(function(){
$("#user-controls").on('click','div',function(){
var classToShow = this.id.split('-')[1],
filter = classToShow === "all" ? 'div': '.' + classToShow;
$("#devices").children().show().not(filter).hide();
});
});

try using jquery
Demo
$('#choice-all').click(function(){
$('.htc, .asus').show();
});
$('#choice-asus').click(function(){
$('.asus').show();
$('.htc').hide();
});
$('#choice-htc').click(function(){
$('.htc').show();
$('.asus').hide();
});

Demo here
$(document).ready(function(){
$(".choice").click(function(){
$(".android,.winph").hide();
if($(this).attr("id")=="choice-all"){
$(".android,.winph").show();
}else if($(this).attr("id")=="choice-asus"){
$(".asus").show();
}else if($(this).attr("id")=="choice-htc"){
$(".htc").show();
}
});
});

to keep it easy and clean you should use a solution such as this one
$(function(){
$('#choice-asus').on('click', function(){
$('#devices > div:not(.asus)').hide();
});
});
it basically says, if you click on #choice-asus, hide all divs in #devices which have no class asus.
you can extend / modify this for your own needs.
besides, its recommend to use jquerys .on() method instead click/bind or what ever handler you'd apply.

$(document).ready(function(){
if($('div').attr('class')=='X')
{
$('div').not($(this)).css('display','none');
}
});

You can try the following code-
function showAll(){
$("#devices div").show();
}
function justASUS(){
$("#devices div").hide();
$("#devices .asus").show();
}
function justHTC(){
$("#devices div").hide();
$("#devices .htc").show();
}
demo here.