0

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

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
Taimur
  • 3,171
  • 8
  • 32
  • 38
  • 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 Apr 15 '13 at 14:15
  • Are you assigning that to a variable, appending it, hiding it? – tymeJV Apr 15 '13 at 14:15
  • @FelixKling I tried to set the thing as a variable and alert() it but it's alerting 'undefined' – Taimur Apr 15 '13 at 14:16
  • Please post a more complete example, preferably with http://jsfiddle.net/ demo. The code you posted is not enough to pinpoint the problem. – Felix Kling Apr 15 '13 at 14:17

4 Answers4

6

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());
}
Ja͢ck
  • 170,779
  • 38
  • 263
  • 309
  • I do currently have a click handler in place which is definitely working, it's just returning 'undefined' for the h2.html :( The whole html thing is dynamically generated using javascript, does that change anything? – Taimur Apr 15 '13 at 14:25
  • @Taimur Well, if the click handler fires but finds no items you have a different problem altogether. You should probably share more code with us. – Ja͢ck Apr 15 '13 at 14:27
1

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.

Bruno
  • 5,961
  • 6
  • 33
  • 52
1

A more efficient way for doing this is:

$('body').on('click', '.square', function(event) {
  var  html =  $(this).find('h2').html();
  console.log(html);
});
borisrorsvort
  • 907
  • 7
  • 22
  • Because you delegate the event from the body, its faster – borisrorsvort Apr 15 '13 at 14:23
  • 1
    What is faster? The handling of the event? Doesn't it have to bubble up all the way up to `body` and then jQuery has to test whether it originated at a `.square` element and hence it is processed *slower*? Directly binding the event handler to the element itself avoids all this. – Felix Kling Apr 15 '13 at 14:29
  • Nope, because it watches any clicks on body (so already on top) then tries to find .square – borisrorsvort Apr 15 '13 at 14:33
  • 1
    Events are processed in two phases, the capturing and the bubbling phase. jQuery only binds handler in the bubbling phase because IE (< 9 or 10) does not support capturing. See http://stackoverflow.com/a/4616704/218196. Which means, the closer you bind an event handler to the event's source element, the earlier it es executed. Event handlers bound at the top (`document`, `body`) are executed *last*. Don't get me wrong, I'm a big advocate of event delegation, but to claim that it is more efficient without knowing anything about the context and defining the term precisely is just misleading. – Felix Kling Apr 15 '13 at 14:36
  • @borisrorsvort It's not faster at all. It **can** be more efficient when dealing with dynamic elements because there's only 1 event handler and less to worry about, but much more happens with this 1 click handler than with a single handler on each element. – Ian Apr 15 '13 at 14:36
0

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>
Filipe Fonseca
  • 62
  • 1
  • 11