I need to select and find the html value of the H2 tag within a particular div which is clicked, this is what I'm trying right now but to no avail:

When the .square is clicked, I'm trying to run this:

 $(this).find('h2').html();

and this is what the html looks like:

<div class="square" id="2"><h2>Title</h2><h3>Comment</h3></div>

What am I doing wrong?

Thanks

I need to select and find the html value of the H2 tag within a particular div which is clicked, this is what I'm trying right now but to no avail:

When the .square is clicked, I'm trying to run this:

 $(this).find('h2').html();

and this is what the html looks like:

<div class="square" id="2"><h2>Title</h2><h3>Comment</h3></div>

What am I doing wrong?

Thanks

• javascript
• jquery
• dom

• 2 Why do you think you are doing something wrong? What happens? You also have to explain the problem you are facing, not only what you are trying to achieve. – Felix Kling Commented Apr 15, 2013 at 14:15
• Are you assigning that to a variable, appending it, hiding it? – tymeJV Commented Apr 15, 2013 at 14:15
• @FelixKling I tried to set the thing as a variable and alert() it but it's alerting 'undefined' – Taimur Commented Apr 15, 2013 at 14:16
• Please post a more plete example, preferably with jsfiddle demo. The code you posted is not enough to pinpoint the problem. – Felix Kling Commented Apr 15, 2013 at 14:17

4 Answers 4

Your code has to be placed inside a click handler like so:

$('.square').on('click', function() {
    alert($(this).find('h2').html());
}

Outside of the click handler, this points to window and $(window).find('h2') doesn't find anything and thus .html() yields undefined.

If your <div class="square"> is dynamically generated, you need to "hook" your click handler onto the closest element that will not disappear from the page.

$('#element_id').on('click', '.square', function() {
    alert($(this).find('h2').html());
}

A more efficient way for doing this is:

$('body').on('click', '.square', function(event) {
  var  html =  $(this).find('h2').html();
  console.log(html);
}); 

Maybe you have to run the code after the document is ready.

$(function() {
    $(".square").click(function() {
        console.log($(this).find('h2').html());
    });
});

$(function() {}); is the short way to write $(document).ready(funciton() {});.

Moreover your code has to be placed as callback of the click event listener.

Your code is entirely correct. You may see an example of an application here (or on the fiddle):

<script>
$(document).ready(function(){
    $("div#2").click(function(){
        var title = $(this).find('h2').html();
        $("span").text(title);
    });
});
</script>

<div class="square" id="1"><h2>I'll not work because my id is 1</h2></div>
<div class="square" id="2"><h2>Click me and you'll see me below on the span!</h2></div>
<span></span>