jQuery onclick function won't fire on nested divs - javascript

I've got a web-page that features two buttons at the top which are meant to sort some data later in the page. For some reason I can't get the nested #byFilter to accept an onclick(function())
Javascript
$(document).ready(function() {
$('.filter').click(function() {
console.log('I\'ve gotten');
});
$('#byName').click(function(e) {
e.stopPropagation();
console.log('this far');
});
//just some stuff with geolocation
getLocation().done(function() {
getStuff(origin);
});
});
HTML
<section id="Sortby">
<div class="filter" id="#byName">
Name
</div>
<div class="filter" id="#byDistance">
Distance
</div>
<br style="clear:both;">
So when I load the page and click on the divs, all I get is "I've gotten"
I don't remember any extra step required to attach a click listener to a nested div like this, but I can't seem to get this to work. I fear I'm missing something quite trivial.

Remove the pound(#) signs in the id attributes themselves. Pound is only used in a selector as a short-hand to refer to an id attribute
$(document).ready(function() {
$('.filter').click(function() {
console.log('I\'ve gotten');
});
$('#byName').click(function(e) {
e.stopPropagation();
console.log('this far');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="filter" id="byName">
Name
</div>
<div class="filter" id="byDistance">
Distance
</div>
<br style="clear:both;">

Related

jQuery click event removing first element

Im working on a project and on my .ejs file I have a popup:
<div id="just-claimed-popup2" class="popup">
<h6>You just claimed:</h6>
<h2 id="card-just-claimed"></h2>
<p class="show-message">Show this Screen!</p>
<button id="deletePromoFromHome" class="close-button">Close</button>
</div>
On my javascript file I have a code that creates cards on a loop:
$('#promotion-container footer').before(`
<div class="promo card promo${i}">
<div class="promo-wrapper">
<div class="promo-header">
<h2 class="promo-title">${eventName}</h2>
<span class="close-promo-wrapper"><span class="close-promo"></span></span>
</div>
<div class="promo-info">
<span class="promo-details">
<p class="promo-detail promo-location">${eventLocation}</p>
<p class="promo-detail promo-date">${eventDate}</p>
<p class="promo-detail promo-time">${eventTime}
<span class="promo-description"></span>
<span class="buttonRedemp${i}">
<button class="redddButt load-button2" data="Reedem Card">Reedem Card</button>
</span>
</div>
</div>
</div>
`)
I want the card to disappear when people click 'redddButt', this is my code:
$(`#promotion-container .promo${i} .redddButt`).on('click', function(e){
e.stopPropagation();
$(`div.promo${i}`).addClass('toDelete')
var esc = $.Event("keyup", { keyCode: 27 });
$(document).trigger(esc);
$('#just-claimed-popup2').addClass('reveal');
$('#card-just-claimed').text(eventName);
$('#deletePromoFromHome').click(function(){
$('div.toDelete').fadeOut("slow")
})
})
PROBLEM: it always removes just the first card clicked and if you click the button in another one it stops working, so it only works once. If I console.log something the click event is happening, it's just not running the code inside of it.
Try changing your handler to:
$('body').on('click', `#promotion-container .promo${i} .redddButt`, function(e){
//function stuff here
}
The problem might be that elements are generated after the handler is attached.
Your code is missing some few closing tags. Since the cards are dynamically generated, try using (not tested):
var buttonContext;
$(document).on('click', '#promotion-container .promo .redddButt', function() {
buttonContext = $(this);
// Something
});
$('#deletePromoFromHome').click(function(){
buttonContext.closest('.promo').fadeOut("slow");
});
You can omit this line: $(div.promo${i}).addClass('toDelete');
The cards may have a single class (.promo) instead of (.promo#), unless may be you want to do further manipulation (say different styling etc).
Check this for more details on $(document): https://stackoverflow.com/a/32066793/3906884

How to replicate function on similar divs with same function

If I have li which contains a function (duplicate on keyup), how can I replicate that same function to a clone of that same li.
this is the element (li, better said), which will be constantly duplicated
<li class="main-item">
<div class="header-item fwidth">
<div>
<h1 class="duplicado fleft"></h1>
</div>
</div>
<div id="internal-items-2" class="collapse collapsible-item">
<div>
<input type="text" value="" class="duplicante nombre-item">
</div>
</div>
</li>
this is the duplicate on keyup function, which produces text on the H1 element according to what is written on the input
$(function() {
$('.duplicante').on('keyup', function() {
var text = $(this).val();
$('.duplicado').text(text);
});
});
How to make that function works for each duplicated li element?
Fiddle example
If I understand correctly, what you want is to updated the individual headers upon keyup.
One way to do it would be like this:
$(function() {
$('.duplicante').on('keyup', function() {
var text = $(this).val();
$(this).closest('li').find('.duplicado').text(text);
});
});
here is the fiddle:
http://jsfiddle.net/s16vds6n/1/

JQuery - Detecting which div box was clicked

I'm trying to detect which div box was clicked with JQuery and I'm not sure what I am doing wrong. I'm aware that I can approach this in a different method by directly calling functions if a div box is clicked, but I wish to do it this way by first determining what was clicked.
$(document).ready(function() {
$(document).click(function(event){
var id = event.target.id; //looks for the id of what was clicked
if (id != "myDivBox"){
callAFunction();
} else {
callSomeOtherFunction();
}
});
});
Thank you for any suggestions!
You could use the closest function to get the first ancestor element with tag div, see following example:
$(document).ready(function() {
$(document).click(function(event){
var parentDiv = $(event.target).closest("div");
console.log(parentDiv.prop("id"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
<span id="span1">Test1</span>
</div>
<div id="div2">
<span id="span2">Test2</span>
</div>
I hope it helps you. Bye.
No matter what you click, you will always know the element that was clicked:
$("#myDiv").click(function(e){
alert("I was pressed by " + e.target.id);
});
Knowing that you don't want to add this to every div, and you have your click on your document, you'll need to figure out what divs can be reported as "clicked".
In order to do this you'll either need a strict hierarchy of elements in your DOM (which is anoyingly bad) or you can decorate "clickable" div's with a specific class.
Fiddle - similar to below. https://jsfiddle.net/us6968Ld/
I would use closest in Jquery to get the result you want.
$(document).ready(function() {
$(document).click(function(event){
var id = event.target.id;
var clickDiv = $(event.target).closest('div[class="clickable"]');
alert(clickDiv[0].id);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="clickable" id="clickable1">
<span id="foo"> click me - Foo - clickable 1</span>
</div>
<div id="notClickable1">
<div class="clickable" id="clickable2">
<span id="span1">
Click Me Inside Span 1 - clickable 2
</span>
</div>
<div class="clickable" id="clickable3">
<div id="notClickable2">
<div id="notClickable3">
<span id="click me">Click Me - clickable 3</span>
</div>
</div>
</div>
</div>
try this:
$('div').click(function() {
alert($(this).attr('id'));
});
https://jsfiddle.net/1ct0kv55/1/

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');
});

OnClick event for div inside lots of container Divs

I have an app I'm developing and I need a onclick() event to be fired when a <div> is clicked.
So in other words,
<div id="panda"></div>
$("#panda").click(function () {
console.log("some text");
});
So this statement works but now lets say I have,
<div id="panda">
<lots of children>
<div id="koala">
</div>
</lots of children>
</div>
$("#koala").click(function () {
console.log("doesnt work");
});
Now you see for the life of me I can't get koala to be clickable. The click event on parents works fine, and click evens for some empty divs I use as buttons work fine, but for some reason I cant get I filled child <div> to be clickable.
Any ideas what the case could be?
I tried this,
$('#panda').click(function(e){
if ($(e.target).is('#koala'))
{
console.log("koala");
}
});
But it just logs every click on the parent.
One option is to listen to the div children for panda.
$("#panda").on('click','div',function() {
console.log($(this).text()+' '+$(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panda">
<div id="koala">
koala
</div>
<div id="bear">
bear
</div>
</div>
Try making the selector '#panda #koala' like this
$("#panda #koala").click(function () {
console.log("koala");
});
Here is an example,
<div id="panda">Panda
<div id="koala">Koala</div>
</div>
$("#panda").on('click', '#koala', function () {
alert("koala!!!");
});
Here is a Fiddle

Categories

Resources