Find the id by class in nested div jquery - javascript

I have an html like this
<div class='click' id='1'>
one
<div class='click' id='2'>
two
<div class='click' id='3'>
three
<div class='click' id='4'>
four
<div class='click' id='5'>
five
</div>
</div>
</div>
</div>
if i have and click event on class click ,there is any way to return the id of which i click
such as
$('.click').click(function(){
alert('id whitch i click')
});
Becase if i click on three i allway get the id of one and two three.

Sure, just do this:
$('.click').click(function(e){ //e=event
alert($(this).attr("id")); // alert clicked element's id
e.stopPropagation(); // stop event propagation so it doesnt propagate to click 1 and click 2
})
Update: As mentioned by Felix Kling, you can access de DOM directly and use:
alert(this.id);

Demo: http://jsfiddle.net/tzJUN/ using this.id http://jsfiddle.net/c65x9/
If you keen : jQuery attr vs prop?
Stop propogation will stop the click event the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
API:
.stoppropagation - http://api.jquery.com/event.stoppropagation/
Code
$(document).ready(function () {
$('.click').click(function (event) {
event.stopPropagation();
alert($(this).prop("id")); //<< --- or this.id
});
});

$('.click').click(function(e){
$(this).attr("id");
alert($(this).attr("id"));//here you can see your clicked id
})

Yes. its simple
$(document).ready(function(){
$('.click').click(function(){
var ID=$(this).attr('id');
alert(ID);
//This ID varible will return ID of the Div Clicked
});
});

Related

getting the value of the button clicked in a group of buttons

html
<div id="group1">
<button>buttonA</button>
<button>buttonB</button>
</div>
javascript
$('#group1').on('click', function(event) {
// get ONLY the value of the button cilcked
});
Is something like this possible without attaching an event to every button in the group?
Add a target selector to the on() and use this or event.currentTarget within the handler function to access the matching element the event occurs on
$('#group1').on('click', 'button', function(event) {
console.log($(this).text())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="group1">
<button>buttonA</button>
<button>buttonB</button>
</div>

jQuery toggleClass only toggles once

I have a div which i am trying to toggle its class from one to another. I am able to toggle it only once but it will not return to the original class. I looked around for possible answers and looked into the propogation function, however i am unsure this is the correct use?
<body>
<div id="wrapBreather">
<div id="counter" class="cInact">
<!--<canvas id="timerAnimation"></canvas>-->
</div>
</div>
<br />
<button id="startStopCount" class="HomeButton" >Start</button>
<script>
$(startStopCount).click(function(e){
e.stopPropagation();
$('.cInact').toggleClass('cDown cInact');
});
$('html').click(function () {
$('#counter').removeClass('cDown');
});
</script>
</body>
You are getting the element via $('.cInact'). However, when you toggle the class .cInact, you can no longer get that element by $('.cInact') (it doesn't have that class anymore).
You can either do a selection with $('#counter') (getting the ID instead of the class, because you aren't toggling the ID) or assign the element reference to a variable:
var myAwesomeCounter = $('.cInact');
// Then use
myAwesomeCounter.toggleClass('cDown cInact');
Well, you're selecting the class 'cInact' and then toggling it's class.
i.e- removing it.
Wen you're trying to select the element again with the same selector: classname == cInact it's no longer true for that element. so you select nothing, and nothing happens.
To fix this, try using a different selector- e.g- id, like so-
$('#counter').toggleClass('cDown cInact');
The selector $(startStopCount) is wrong. It should be $("#startStopCount")
$('#startStopCount').click(function(e){
e.stopPropagation();
$('.cInact').toggleClass('cDown');
});
$('html').click(function () {
$('#counter').removeClass('cDown');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="wrapBreather">
<div id="counter" class="cInact">
<!--<canvas id="timerAnimation"></canvas>-->
</div>
</div>
<br />
<button id="startStopCount" class="HomeButton" >Start</button>
</body>
$('#startStopCount').click(function(e){
e.stopPropagation();
$('#counter').toggleClass('cDown cInact');
});
$('html').click(function () {
$('#counter').removeClass('cDown');
});
Better perhaps:
$('#startStopCount').click(function(e){
e.stopPropagation();
$('#counter').toggleClass('cDown cInact');
});
$('body').click(function () {
$('#counter').removeClass('cDown');
});

jQuery blur() not listening to $(this)

Followed by the HTML DOM:
<div class="opt">
Options
<div class="panel">
<h3>i am in panel!!</h3>
</div>
</div>
When i click on the .opt it would show the .panel content, but then i need to trigger another event to hide the .panel when clicking outside of the .opt element.
jQuery:
$('.opt').click(function(){
var $this = $(this);
$this.find('.panel').fadeIn();
$this.blur(function(){
$this.find('.panel').fadeOut();
alert('i am from blur');
});
});
Here is a demo JsFiddle
But the blur() method is not executing, what i am doing wrong here technically?
You can try a click event on body instead of blur. Take a look at
https://jsfiddle.net/y0wsfpvb/7/
$('.opt').click(function(){
var $this = $(this);
$this.find('.panel').fadeIn();
});
$('body').click(function (e){
if( $(e.target).closest(".opt").length > 0 == false) {
$('.panel').fadeOut();
alert('fake blur');
}
});
This works if you define de tabindex property for the div...
Try:
HTML
<div class="opt" tabindex="3">
Options
<div class="panel">
<h3>i am in panel!!</h3>
</div>
</div>
JS
$('.opt').click(function(){
$(this).find('.panel').fadeIn();
$(this).blur(function(){
$(this).find('.panel').fadeOut();
alert('i am from blur');
});
});
You could bind the fade out action to the body's on click handler, and then add:
event.stopPropagation();
to your opt class click handler to achieve this.
Here is an example on codepen

Fire click event on a div excluding one child div and it's descendents

Inside that I have other child divs. Those have child divs too.
<div class="parent">
<div class="child_1">//children elements</div>
<div class="child_1">//children elements</div>
<div class="child_1">//children elements</div>
<div class="child_1">//children elements</div>
</div>
I want to add a click event that fires when I click any element inside parent div, including parent div, excluding child_1 div and its descendants.
Currently I tried with
jQuery(".parent").not(".child_1").click(function(event) {
});
But the click event works when I click on child_1 div and it's descendants.
What is the problem here? please help.
UPDATE
here i have another click event for child_1
jQuery(".child_1").click(function(event) {
});
You should do it like this.
$('.parent').on('click', function () {
// do your stuff here
}).find('.child_1').on('click', function (e) {
e.stopPropagation();
});
Here is a fiddle http://jsfiddle.net/BbX7D/1/
You still have to catch the click event on the elements that you want to exclude, otherwise the click will just bubble up to the .parent element.
Use the closest method to check if the clicked element is, or is a child of, an element with the class .child_1. Use stopPropagation to keep the event from bubbling:
$('.parent,.parent *').click(function(e){
if ($(this).closest('.child_1').length > 0) {
alert('in child_1');
} else {
alert('not in child_1');
}
e.stopPropagation();
});
Demo: http://jsfiddle.net/Guffa/tETCQ/
I think it should be
jQuery(".parent, .parent *").not(".child_1").click(function(event) {
});
Try this (fiddle):
(edit + updated fiddle)
I spotted a flaw. This version checks if the clicked element is or is inside an element which has the class 'exclude':
<div class="parent">
<div class="child_1 exclude">//children elements</div>
<div class="child_1">//children elements</div>
<div class="child_1">//children elements</div>
<div class="child_1">//children elements</div>
</div>
jQuery(".parent").click(function(event)
{
if ($(event.target).closest('.exclude').length>0) return false;
alert('hi');
});
a bit of an old question, but figured i'd throw out my resolution in case it helps anyone else.
this is pretty much what i did. this example uses your markup:
$('.parent').on('click', function(e) {
var $target = $(e.target);
if (!$target.parents('.child_1').length && !$target.hasClass('child_1')) {
// do what you need on the parent's click event
// add 'e.preventDefault()' here if you need
}
// no need to prevent default or stop propagation here
// this will allow click events on child elements to work
});

Delegate/Live Failure. Can't bind events after Prepending an element

EDIT--- I realized that the problem here was that the click handler that was bound to the element had to be unbound before I could bind another click handler handler.
I want to allow the user to select/unselect items by click on the element in question. The elements start in an "options" box and if clicked, move to a "selected box". If they are then clicked in the selected box, the elements move back to the original options box.
Can't figure out why delegate() and live() are not working here. I assume this has to do with prependTo() or appendTo().
$('#amen_options .options p').click(function(e){
$(this).appendTo('#amen_selected .options');
e.stopPropagation();
e.preventDefault();
});
/*
$("body").delegate('#amen_selected p', 'click', function(e){
#(this).appendTo('#amen_options .options');
e.stopPropagation();
e.preventDefault();
});
*/
$('div#amen_selected div.options p').live('click',function(e){
$(this).appendTo('#amen_options .options');
e.stopPropagation();
e.preventDefault();
});
Here's the markup:
<div>
<div id="amen_options">
<h3>Click to Select</h3>
<div class="options">
<p data-option="">One</p>
<p data-option="">Two</p>
<p data-option="">Etc...</p>
</div>
</div>
<div id="amen_selected">
<h3>Selected</h3>
<div class="options">
</div>
</div>
The first click works (sending p elements from options to selected box). Once in selected, though, no event handlers are binding. The firebug console isn't showing an error. Normally, I'd assume that this is a markup problem, but I've checked it repeatedly.
Thanks!
It looks like delegate() works good.
http://jsfiddle.net/fLXgU/1/
$('body').delegate('#amen_options .options p', 'click', function(e) {
$(this).appendTo('#amen_selected .options');
return false;
});
$('body').delegate('#amen_selected .options p', 'click', function(e) {
$(this).appendTo('#amen_options .options');
return false;
});

Categories

Resources