Find the jQuery Bug #7: Problem

_snippet.html

<label for="attendee-name">Attendee Name</label>
<input id="attendee-name" type="text"></input>
<button id="register" data-target="#attendee-name">Register</button>​

_snippet.js

Conference.prototype.register = function( e ) {
    var $attendee = $( $( e.target ).data( "target" ) );

    /* The "this" parameter refers to the register button DOM element   
       and NOT the object that we were expecting... */

    this.attendees.push( $attendee.val() );

    alert( "Thanks for registering for " + this.name + ". " + 
        "There are " + this.attendees.length + 
        " registered thus far." );
    
    $attendee.val( "" );
};

fiddle.js

var Conference = function( name ) {
    this.name = name;
    this.attendees = [];
};

Conference.prototype.register = function( e ) {
    var $attendee = $( $( e.target ).data( "target" ) );
    
    this.attendees.push( $attendee.val() );

    alert( "Thanks for registering for " + this.name + ". " + 
        "There are " + this.attendees.length + 
        " registered thus far." );
    
    $attendee.val( "" );
};

var conference = new Conference( "JavaScript Code Camp" );

$( document ).ready( function() {
    $( "#register" ).on( "click", conference.register );
});