Updating a div content with a click event

I’ m not sure what am doing wrong, I am trying to populate the title and date of step 1 and 2 with that of the meetings content, when a register button is clicked.
But nothing happens when is clicked, so i guess am not getting the contents right or something.

<!DOCTYPE html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<meta charset=utf-8 />


$(document).ready(function() {

$(".button").click(function() {	
var date = $(this).closest(".meetings").children(".meeting-date").text();
var title = $(this).closest.(".meetings").(".title").text();



<article class="meetings">
<div class="meeting-type">
    General Meeting / New York
<h3><a href="" class="title">New York Conference</a></h3>

<section class="meeting_description">
    <div class="speaker">

     <span class="meeting-date">February 28, 2012</span>


<p class="register">
    <a class="button register first" href="#">Register</a>


 <!-- step 1 -->
 <div id='first-modal' class='modal'>
      <h4>Confirm Registration</h4>

   Please click the confirm button below to complete your registration for the event;<br />
     <span class="title"></span>
     <span class="date"></span>


<!-- step 2 -->
<div id='second-modal' class='modal'>
    <h4>Registration Complete</h4>

  <p>You have successfully registered for the event;<br />
     <span class="title"></span>
     <span class="date"></span>


I’m not sure but isnt your button class “button register first” and not just .button?

There are 3 classes, but I am using the button class, is that a problem? I thought is possible to use more than one class on an element

Yes, that is no problem once you get beyond IE6.

Look at the meeting title line - there is your problem.

To give a bit more of a hint, look at

var title = $(this).closest.(".meetings").(".title").text();

I’m by no means a jQuery expert, but I don’t think that shorthand is allowed :stuck_out_tongue:

Like cpradio said, you can’t do


Not to mention that even if you could, you wouldn’t get what you want. Replace that line with this instead:

var title = $('.title', $(this).closest(".meetings")).text();

Here’s the demo: http://jsfiddle.net/aZC8d/

This is what’s going on:

  • I’m using the child selector for jQuery, which is $( [child], [parent] )
  • I find the closest parent using your method, $(this).closest(“.meetings”)
  • I want the child of .meetings, not the parent or whatever is before it…which is what closest gets. The child would be ‘.title’
  • So, $(‘.title’, $(this).closest(‘.meetings’))
  • I then get the text of that $(‘.title’, $(this).closest(‘.meetings’)).text();