alert div id when click on div - javascript

I created new website and on it I want when I click on one div jquery show me div ID and I user this command and I can give div ID
var name = $(this).attr("id");
and when I want to give div's child I use this Command
var name = $(this).children(".select").attr("name");
now I have 3 divs like this
enter image description here
and when I click on div 3 Jquery give me div2 with this command
var name = $(this).children(".select").attr("name");
how can I get div's ID when click on it?
example click on div 1 show me div 1 or when I click on div 2 show me div 2
and when I click on div 3 show me div 3
Thanks

Your first code was correct, you don't need to find children...
$("div").click( function(){
var name = $(this).attr("id");
console.log( name );
});
If you have trouble with multiple events, you can stop propagating the click event with .stopPropagation() like so:
$("div").click( function( e ){
var name = $(this).attr("id");
console.log( name );
e.stopPropagation();
});
See example: https://jsfiddle.net/tg4rmkk9/

You've already solved the main part of the problem:
var name = $(this).attr("id");
This will get you the ID of the Div.
To alert it you can then do alert(name);

Here's a demo of what I think you're going for :
$('[id^=div]').on('click', function() {
alert($(this).attr('id'));
});
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div id="div1">
Click me
</div>
<div id="div2">
Click me too
</div>
<div id="div3">
Click me three
</div>
(see also this Fiddle)

Related

How do I refresh div contents on button click

I have a script inside a div which I want to refresh when someone clicks a button with a unique ID.
I have some data which will be displayed inside the div - which I need to refresh without refreshing the whole page.
I've found a solution which changes a border colour but I can't quite simplify it to what I need. Here's what I have so far
var storeColor = 'red';
$('#container').on('click', 'button', function() {
var $p = $('#content p');
var tmp = $p.css('border-color');
$p.css('border-color', storeColor);
storeColor = tmp;
});
</div>
<button type="button">Refresh DIV</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
Contents of div
</div>
I think there are a few problems with your code... The button is outside of the container and thats the reason the click listener doesn't work. Inside the click function you try to access a paragraph p inside some element with the id content which doesn't exist in your code
var storeColor = 'red';
$('#btnRefresh').on('click', function() {
var $p = $('#container');
$p.css('background-color', 'red');
$p.html('hello world');
});
<button type="button" id="btnRefresh">Refresh DIV</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
Contents of div
</div>
Why not try changing the entire inner content of the div dynamically using document.querySelector('.div').innerHTML = html string
The above will not refresh the page if used upon a button click. You may want to use the preventDefault in the button's event listener too.

Apply scrollIntoView function in to JQuery function

I am using JQuery show and hide function, it works like when you click on image it opens a information log. The information log opens at the top of the page, so I need to make that when you click on the image on bottom on the page it scroll you up to the content.
JQuery what I am using for my hide and show content:
jQuery(function() {
jQuery('.showSingle').click(function() {
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show();
});
});
Scrolintoview function that I tried to use:
function myFunction() {
var elmnt = document.getElementById("targetDiv");
elmnt.scrollIntoView();
}
Content from witch I am calling both functions:
<a onclick="myFunction()" class="showSingle" target="{$ID}">
//HTML content here
</a>
Content what I am calling to shop up at the top of the page:
<div id="div{$ID}" class="targetDiv SlideDiv">
//HTML content here
</div>
I tried to combine this two JS function but only jQuery('.targetDiv').hide() works for me.
The problem is that your target div
<div id="div{$ID}" class="targetDiv SlideDiv">
//HTML content here
</div>
has some id and the classes targetDiv and SlideDiv.
document.getElementById("targetDiv") tries to find an element with the id targetDiv but your element does not have this id, but is has a class with the same name.
You need to find the element by its class which can be done in a few ways:
1
var elem = document.getElementsByClassName("targetDiv")[0];
2
var elem = document.querySelector(".targetDiv");
3
var elem = $(".targetDiv")[0];

jQuery click event handle both class element and element inside

I have the following HTML:
<div class="eventContainer" id="dennaVecka" style="background-color: #2B4699;">
<p>Denna vecka</p>
</div><!--eventContainer ends-->
<div class="eventList" id="dennaVecka_table">
...
</div>
And the following jQuery:
eventID = null;
$('.eventContainer p, .eventContainer').click(function (e) {
//eventID = $(this).attr('id');
eventID = e.target.id;
$('.eventList#' + eventID + '_table').fadeIn(300);
//alert(e.target.id);
});
I want: When div class eventContainer or the paragraph inside it is clicked, I want to use the ID of eventContainer (id="dennaVecka") to display the div class eventList beneath it. My problem with the current setup is that I don't know how to get the ID of eventContainer if the paragraph is clicked. If I click the paragraph I will get the ID of the paragraph ("undefined").
Is there a way to get the ID of eventContainer in jQuery no matter if I click the div or the paragraph?
Maybe I should setup the HTML in another way?
Use the fact that click event bubbles up to the parent container. In this case you can bind only one event handler to .eventContainer and read this.id to get container id:
$('.eventContainer').click(function (e) {
eventID = this.id;
$('.eventList#' + eventID + '_table').fadeIn(300);
});
So if you click p element inside .eventContainer event will still be handled by above listener on .eventContainer, with this pointing to it.

How to get id's of multiple divs on clicking one div

I have following code
<div id = "fa10_holder">
<div id = "b-1"></div>
</div>
I am adding this dynamically in a div that holds all of these type of divs ..
lets say if I add another div it would be like this
<div id = "fa11_holder">
<div id = "b-2"></div>
</div>
Now the problem is when I click the div with id of b-1 or b-2 and so on I want the id of its parent like fa10_holder and the id of the clicked div aswell... can any one help me ??
Like this working demo another way.
APIs:
parents - http://api.jquery.com/parents/
attr or prop - http://api.jquery.com/attr/ or http://api.jquery.com/prop/
I have added extra class, in case you have many div you can have a blanket click via class. :)
Extra: When to access the attribute (vs the property)?
code
$(document).ready(function () {
$(".hulk").click(function () {
alert($(this).parents('div').attr('id'));
alert($(this).attr('id'));
});
});
html
<div id = "fa11_holder"> parent
<div id = "b-2" class="hulk">hulk</div>
</div>
var thisid = this.id;
var parrentid = $(this).parent().attr('id');

Appended Content is Not Triggering - Even using .on()

I append the following content using jQuery to create a lightbox style popup that loads loads content using AJAX:
<div id="framebox-overlay">
<div id="framebox-wrapper">
<div id="framebox-nav-wrapper">
Previous
Next
</div>
<section id="framebox-content">
<!--AJAX to insert #single-project-wrapper content here-->
</section>
<div id="framebox-close">
<p>Click to close</p>
</div>
</div>
</div>
I am trying to get the appended next/previous links to work (.framebox-next and .framebox-prev as shown above), however the links are not triggering properly:
jQuery(document).ready(function(){
$('.framebox-trigger').click(function(e){
// Code that appends lightbox HTML and loads initial AJAX content goes here
});
// Code that isn't working:
$('body').on('click', 'a .framebox-next', function(e) {
e.preventDefault();
//remove and add selected class
var next = $('#portfolio-wrapper li.current-link').next('li > a');
$('#portfolio-wrapper li.current-link').removeClass('current-link');
$(next).addClass('current-link');
//fade out and fade in
var nexthref = $('#portfolio-wrapper li.current-link a').attr('href');
$('#single-page-wrapper').fadeOut('slow', function(){
var current = $('#portfolio-wrapper li.current-link a');
$(this).load(nexthref + " #single-page-wrapper", function(){
$(this).fadeIn('fast');
});
});
return false;
});
});
This last bit of code is not doing anything to the appended link .framebox-next. I have looked for other answers, and it seems that the .on() method should be effecting appended content.
Any help or input would be great.
Your selector is wrong for .framebox-next. You have a space between a and .framebox-next which would mean .framebox-next needs to be a child of the a element.
Use this selector instead:
$('body').on('click', 'a.framebox-next', function(e) {
...
}

Categories