alert javascript generated div id - javascript

I've generated some divs with .append() method.
Code looks like that:
$("#someDiv").prepend("<div id='someId' class='myClass'></div>"):
$("#someDiv").prepend("<div id='someId2' class='myClass'></div>"):
that works great, now, i want to use that divs id's.
i'm trying to do it this way:
$(".myClass").click(function(){
alert($(this).attr('id'));
})
but, it does not work, help me please.

If the elements are dynamically generated, you probably need to delegate the event to an element that actually exists when binding the handler, something like:
$(function() {
$("#someDiv").on("click", ".myClass", function(){
alert(this.id);
});
});
And you'll need to replace the colon on the end of you're prepends with a semicolon to make those work.
FIDDLE

The problem maybe because you are binding the click event to "myClass" before actually adding the divs. Try placing the click event code after the code for adding new divs like this
$("#someDiv").prepend("<div id='someId' class='myClass'></div>"):
$("#someDiv").prepend("<div id='someId2' class='myClass'></div>"):
$(".myClass").click(function(){
alert($(this).attr('id'));
})

Related

jQuery - Select everything but

I want to use jQuery to select everything on a page except a certain div. My question is similar to this answer, but that solution selects only divs, I want to select everything.
In this example Fiddle, I want to select everything that does not have, or not the descendent of an element with, a class of "kids". So clicking on the "grandkids" and "kids" should not show a log entry, but clicking on the "parent" or the image would.
The page will have a very complex structure so something like this wouldn't be feasible.
You can try the not selector
$('body *').not('.kids, .kids *');
or if you are trying to register an event handler then
$(document).on('click', ':not(.kids, .kids *)', function(){
})
use this code, this code exclude .kids element and inner elements of .kids class
$('body').click(function(e) {
if(!$(e.target).closest('.kids').length){
console.log(e.target);
}
});
DEMO
Use e.currentTarget in jquery
$("#parent").not($('.kids')).click(function(e) {
console.log(e.currentTarget);
});

Change element's ID multiple times

so what I'm triying to achieve is that I want one element to append some other elements to div and change its ID attribute (or something similar).
i have tried something like this
$('#add3').click(function(){
$('#add3').attr("id", "add4");
$('.third_row1').append('something to append');
});
and also tried something like this:
$('#add').click(function(){
var vari = $("<div id='add2'>add another user</div>");
$('#add').remove();
$('.third_row1').append(vari);
$('.third_row1').append('something to append');
});
so clicking one button (like second example) has no effect on third, fourth ... n click
same thing with the second example
thanks in advance for help
UPD
ok, so here's how I generate selects which I want to append
<jsp:useBean id="obj1" class="com.Users" scope="page"/>
<div class="third_row1">
<select name="mySelect1" id="mySelect1">
<c:forEach var="item1" items="${obj1.items}">
<option>${item1}</option>
</c:forEach>
</select>
</div>
all I want to do is to add same select, but with different ids and names
Since elements IDs are changed dynamically, you should use delegated event handlers with .on().
For example:
$(document).on("click", "#add3", function() {
$('#add3').attr("id", "add4");
$('.third_row1').append('something to append');
});
If all these elements (#add, #add3) are inside page static element, it will be better to use this element instead of document for perfomance:
$("static_element_selector").on("click", "#add3", function() {
And just to note: since this inside event handler points to clicked DOM element, you can use this.id = "add4" instead of $('#add3').attr("id", "add4");. It is shorter and works slightly faster.

jQuery .click function issue

I need a paragraph to fade out when the button is clicked, and I also need another paragraph to fade in at the same time. I've tried everything I can think of, even formatting differently, but nothing works. My code looks like this
$(document).ready(function() {
$('.s3').addClass('.one');
$('.button1').addClass('.party');
$('.button2').addClass('.bear');
$('.button1').click(function(){
$('.one').fadeOut('fast');
$('.ifparty').fadeIn('slow',1);
});
});
I think you meant to add a class of "one" not ".one". Your selector is not going to pick that up the way you are adding it now. Same with the other addClass() calls.
$(document).ready(function() {
$('.s3').addClass('one');
$('.button1').addClass('party');
$('.button2').addClass('bear');
$('.button1').click(function(){
$('.one').fadeOut(200);
$('.ifparty').fadeIn(2000);
});
A FIDDLE
http://jsfiddle.net/7Gcjp/1/
You dont need to . with class name while adding a class to element.
$('.s3').addClass('one');

getting individual atrributes while selecting a class with JQuery

I'm new to javascript and JQuery, and I'm working in a small project with JSP.
I create a grid dynamically with JSP and I added some buttons wich class is "select" and in the alt attribute I set the current row index. That works perfectly, I'm trying to set the onclick dynamically. This is my code
$('.select').click(function (){
alert($('.select').attr('alt'));
}
I want to each button to show its own index, but that code shows just the first index in each button. I've searched how to do it, but nothing comes out.
Is there a chance to do what I want?
change this line as:
alert($(this).attr('alt'));
When jQuery calls your event handler it sets this to be the DOM element in question, so try this:
$('.select').click(function (){
alert($(this).attr('alt'));
});
If you need to access DOM element properties you can then get them directly, e.g.:
alert( this.id );
this.value = "test";
If you need to use jQuery methods on the element you need to pass it to the jQuery function first, e.g.:
$(this).hide();
$(this).css("color","red").slideDown();
$('.select').click(function (){
alert($(this).attr('alt'));
});
Change
alert($('.select').attr('alt'));
by
alert($(this).attr('alt'));
Now you select the attr alt of the button lauch the event.
Not sure if that's what you're looking for but...
$('.select').click(function() {
$('.select').each(function() {
$(this).attr('value', $(this).attr('alt'));
});
});
This'll have every button "show" the value stored within their alt attribute when you click one button.
By the way, if you're using 1 button per row, you'd probably better go with index().

jQuery .click() event for multiple div's

I have some search results that I'm outputting that are of this form:
<div id="result" title="nCgQDjiotG0"><img src="http://i.ytimg.com/vi/nCgQDjiotG0/default.jpg"></div>
There is one of these for each result. I'm trying to detect which one is clicked and then do some stuff. Each result has a unique title, but the same id. How do I use .click() to know which one was clicked so I can get it's ID and use it?
Here's how I'm getting the HTML from above:
$.each(response.data.items, function(i,data)
{
var video_id=data.id;
var video_title=data.title;
var video_thumb=data.thumbnail.sqDefault;
var search_results="<div id='result' title='"+video_id+"'><img src='"+video_thumb+"'></div>";
$("#searchresults").append($(search_results));
I tried
$('div').click(function(){
alert(this.id);
});
and the alert says "searchresults" (no quotes).
Additionally, this is the perfect opportunity to make use of event delegation. With this technique, you do not have to worry about re-binding click handlers after programmatic insertion of new DOM elements. You just have one handler (delegated) to a container element.
$("#searchresults").delegate("div", "click", function() {
console.log(this.id);
});
See .delegate
You can't have the same ID on multiple tags. You will have to fix that. You can use the same class, but there can only be one object in the page with a given ID value.
this.id will fetch the id value of the item clicked on and this should work fine once you get rid of conflicting IDs:
$('div').click(function(){
alert(this.id);
});
This code should be something this:
var search_results="<div id='result'" + video_id + " title='"+video_id+"'><img src='"+video_thumb+"'></div>";
$("#searchresults").append(search_results);
to coin a unique id value for each incarnation and append will just take the string - you don't need to turn it into a jQuery object.
you could get the title using $(this).attr("title").val()

Categories

Resources