CODEWITHSUNDEEP
javascriptjquery
blueintegral
blueintegral

Reputation: 1271

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).

Upvotes: 2

Views: 4514

Answers (3)

Kelly Cook
Kelly Cook

Reputation: 1261

you could get the title using $(this).attr("title").val()

Upvotes: 0

karim79
karim79

Reputation: 342635

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

Upvotes: 2

jfriend00
jfriend00

Reputation: 707198

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.

Upvotes: 0

Related Questions