jquery: get value from clicked div

Question

<div>'.$i.'</div>

$i is auto generated by loop - which could lead to:

<div>'.$i.'</div>
<div>'.$i.'</div>
<div>'.$i.'</div>

etc. where each $i is different.

How do I get value of particular $i (using jQuery), when div is clicked.

In standard JS I would use onClick($i). In jQuery I just do not know, how to pick that val.

Answer 1

If you don't have any other way to identify the <div> elements, this would place a handler on every <div> on the page.

$('div').click(function() {
    var text = $(this).text();
    // do something with the text
});

The .text() method will return the text content for that <div>, (as well as any nested elements).

If you only wanted the click event on certain <div> elements, the best is to add a class, and select the correct ones based on that.

$('div.myClass').click(function() {
    var text = $(this).text();
    // do something with the text
});

HTML

<div class="myClass">'.$i.'</div>
<div class="myClass">'.$i.'</div>
<div class="myClass">'.$i.'</div>

<div>some other div</div>

If the <div> elements are all within the same ancestor element, you could use .delegate() instead, which will place one handler on the ancestor to handle all divs inside.

$('#parentID').delegate('div.myClass', 'click', function() {
    var text = $(this).text();
    // do something with the text
});

HTML

<div id="parentID">
    <div class="myClass">'.$i.'</div>
    <div class="myClass">'.$i.'</div>
    <div class="myClass">'.$i.'</div>
</div>

(Requires jQuery 1.4 or later)

Answer 2

$('div').click(function(event){
  alert($(this).text());
});

A more efficient solution (since it seems you have a lot of <div>s would be to add a live event to the wrapping element of those, like this:

$('#container').live('click', function(event){
   if(event.target.tagName == "DIV") alert($(event.target).text());
});