Class not working jQuery - javascript

So I more than one dynamicly generated elements with the same class name that I am trying to check input for in jQuery. Instead of it letting me click on both, it is just letting me click the first element generated.
Ex: I click on item_1 and it returns the item_1 id, but when I click on item_2 it doesn't return anyting.
HTML
<div id="item_1" class="resp"></div>
<div id="item_2" class="resp"></div>
JS - Jquery
$(".resp").on("click",() =>{
var id = $(".resp").attr("id");
console.log('attempting toggle' + id);
});

Firstly, you have to use normal function instead of arrow function (to avoid missing the context). Secondly - use this keyword to refer to the actually clicked element.
$(".resp").on("click", function() {
console.log('attempting toggle ' + this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item_1" class="resp">A</div>
<div id="item_2" class="resp">B</div>

This is because .attr('id') returns the value of the id attribute of the first matched element in the set.
Instead, use an old school function for the handler so the this value is equal to the clicked div, then get its id:
$(".resp").on("click", function() {
var id = $(this).attr('id');
console.log('attempting toggle ' + id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item_1" class="resp">First</div>
<div id="item_2" class="resp">Second</div>

What you're doing here is referencing the classname to obtain the id. This gathers the id of the first classname, which isn't what you desire. What you need to do is use the this keyword to correctly obtain the id.
After removing the arrow function and changing the internal code a bit, it should look like this:
$(".resp").on("click", function() {
var id = this.id;
console.log('attempting toggle: ' + id);
});
Also make sure you've correctly installed JQuery. Pick up your JQuery embed code from here.
Also remember to include your JQuery code before your JavaScript code.

Related

Dynamically added class cannot be referenced for some reason

When I use clicks on a link, I add a class to the element:
<a class="js-link" data-category="cat123" href="#">some category</a>
The javascript is:
$(".js-link").click(function (e) {
e.preventDefault();
$(this).addClass(".js-category-selected");
});
When the user submits a search form, I am trying to get the link that was clicked:
var selectedCategory = $(".js-category-selected").data("category");
console.log('selectedCategory:' + selectedCategory);
This always returns undefined.
I can't seem to find the element. Is something wrong with this approach?
Is it because this class is added dynamically? But I'm not binding anything, just trying to located the element.
You were giving class name with a . while adding the class. Just give the name and access using . and to get data write the function inside a handler, outside it, it will be accessed before even the link will get new class and you will always get undefined.
Use $(this).addClass("js-category-selected"); instead of using $(this).addClass(".js-category-selected");
$(".js-link").click(function(e) {
e.preventDefault();
$(this).addClass("js-category-selected");
var selectedCategory = $(".js-category-selected").data("category");
console.log('selectedCategory:' + selectedCategory);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="js-link" data-category="cat123" href="#">some category</a>
You need to remove the . at the start of the class you're adding:
$(".js-link").click(function(e) {
e.preventDefault();
$(this).addClass("js-category-selected");
var selectedCategory = $(".js-category-selected").data("category");
console.log('selectedCategory:' + selectedCategory);
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<a class="js-link" data-category="cat123" href="#">some category</a>

Get All Parents Info Up Until Specified Parent

I have this html codes example:
<html>
<body>
<div>
<div id="stophere">
<h4 class="parentclass">
<span class="target">Clicked</span>
</h4>
</div>
</div>
</body>
</html>
From the html codes example above, I want to get all parents' tag name of class target (when receiving click event) down from div with id stophere.
I tried this code:
$(ev.target).parents()
.map(function() {
return this.tagName;
})
.get()
.join( ", " );
But it includes all parents' tag names above stophere. While the result I want is only 1 div and 1 h4.
What is the correct way to get all parents of target down from stophere?
You can use the parentsUntil method for that
$(ev.target).parentsUntil($('#stophere').parent())
Note that it's non-inclusive, so we pass the parent of #stophere to include that element as well
FIDDLE
I don't claim that this is a good solution, but can be used if adeneo's solution is failed in your situation like in my case.
This code is checking whether the traversing limit is containing that limit line itself or not, by using find() method:
jQuery('html').on("click", function (ev) {
var elemparentid = jQuery(ev.target).closest("[id]").attr("id");
var thisparents = jQuery(ev.target).parents()
.map(function () {
// check if traversing limit is a children of current element or not, by using find() method
if (jQuery(this).find("#" + elemparentid).length < 1) {
return this.tagName;
}
}).get()
.join(", ");
alert(thisparents);
});
FIDDLE

How to hide a dynamically created element with JS?

I want all the elements with id #text-field to be hidden (if the browser support JS, that's why it should be hidden with JS). But don't get it to work with elements created this way:
// Add post
$(document).on('click', 'a.add-post', function(event)
{
// Create content based on a hidden item
var newcontent = $('.type-post#post_id-hid-0').html();
content = '<li class="type-post">' + newcontent + '</li>';
// Place new content
$('.posts-list > li.iteration-0').last().after(content);
// Load necessary JS
load_page();
event.preventDefault();
});
And my load_page() function:
$(function()
{
function load_page()
{
$('#text-field').hide();
}
load_page();
}
Use a class for text-field instead of an ID, ID's are unique for each element while a class can be used over again for this purpose.
A lightweight solution which doesn't require any JS to execute, and won't cause a 'jumpy' interface when it first loads and elements disappear in front of users eyes.
CSS:
#text-field{display:hidden;}
HTML:
<noscript>#text-field{display:block;}</noscript>
you have to do two things:
function load_page(){ //<----put this in global scope
$('.text-field').hide(); //<---hide it with class name
}
$(function(){
load_page();
});
so now somewhere in your page you might have this <input type='text' id='text-field' /> here you can change your elem's id to class this way:
<input type='text' class='text-field' />
this should help if you can replace classname with whichever dynamic page related class you insert :
$(".classname[id='text-field']").hide();
or
$(".classname[id='text-field']").attr("style", "display:none");

how to pass runtime parameters in jquery functions?

I m new to jquery. My requirement is to pass rowid(unique id of each record of a table) in a jquery function. I can get rowid only at runtime. so how can I bind click event to the tag whose id is this rowid.
Upd
Del
$(what to pass here).bind('click',function(ev) {
_operation(para1,para2); // function which is going to perfom action
ev.preventDefault();
return false;
});
get the id , and acording to id do what ever you want
$('a').on('click',function(){
var id = $(this).attr('id');
if(id == //what you want)
{
//function 1
}
else
{
//function 2
}
return false;
});
If there are any similarities between the IDs, you can use one of the attribute selectors such as:
ID contains
$('[id*="something"]')
ID begins with
$('[id^="something"]')
http://api.jquery.com/category/selectors/
A better approach would be to place all of the dynamically named anchors into a container, and then select on that:
<div id="container">
<a ...></a>
<a ...></a>
</div>
Then you would select all the child anchors:
$('#container > a').click(...);
It's hard to find a good selector from so few HTML code. Use a class on your markup if possible:
<a class="roww" href="javascript:void(0)" id="`string(rowid(Gatepass))`">Upd</a>
<a class="roww" href="javascript:void(0)" id="`string(rowid(Gatepass))`">Del</a>
then you can use $('.roww') to query your nodes.
Here's what you can do to get the id from the event handler:
function( ev ) {
//wrap the element with jQ:
var jel = $(this);
//Then access attributes with .attr() getter:
var id = jel.attr('id');
... //do whatever you want now.
... // there's a quicker alternative to get the id without jQuery, simply:
... // var id = this.id
}
if the id comes dynamically from the server, put inside the function the same id + hash for id selctor
$(what to pass here) => $("'#" + string(rowid(Gatepass)) + "'")

Get the id of the clicked-upon div

I want to select the id of the current div when I click on it in jQuery.
For example, say I have HTML like this:
<div class="item" id="10">hello world</div>
<div class="item_10">hello people</div>
When I click on the first div on .item class, I want to copy the id of the current div + adding to it the number (10), so it will be ("div id" + 10) equal to the second dev class = item_10.
I tried to use currentid = this.id; but it doesnt work :( !
First, note that id attributes starting with numbers are syntactically illegal in HTML4. If you're using id="10" make sure that you're using the HTML5 doctype (<!DOCTYPE html>).
It's hard to say why what you were doing didn't work without seeing your actual code. Presumably it is because you were registering for the event on a higher element (like the body) and this.id was the id of that higher element and not the element you clicked on.
In this case, you want to use the target property of the event to find what you clicked on. For example:
$(document.body).click(function(evt){
var clicked = evt.target;
var currentID = clicked.id || "No ID!";
$(clicked).html(currentID);
})
Seen in action: http://jsfiddle.net/Gra2P/
If you were registering on the specific elements instead, then this.id does work:
$('div').click(function(evt){
var currentID = this.id || "No ID!";
$(this).html(currentID);
})
Seen in action: http://jsfiddle.net/Gra2P/1/
This is sub-ideal, however, because:
It makes many event handler registrations instead of 1, and
If additional divs are added to the document after this code is run, they will not be processed.
Under jQuery 1.7, you use the .on method to create a single event handler on a parent element with selectors for the kinds of elements you want to catch the event on, and have this set to them. In code:
$(document.body).on('click','div',function(evt){
var currentID = this.id || "No ID!";
$(this).html(currentID);
})
Seen in action: http://jsfiddle.net/Gra2P/2/
I think you're trying to do something like:
$(".item").click(function(){
var id = $(this).attr("id");
var el = $(".item_" + id);
});
Now el is your second div.
You can simply use this.id
$('div').click(function() {
var divid = this.id;
alert($('.item_'+divid).html());
});
Demo
Something like this?:
$('div').click(function() {
theId = $(this).attr('id');
//Do whatever you want with theId.
});
This can be done as:
$('.item').click(function() {
var divId = $(this).attr("id");
});

Categories