How to access object method within jQuery event

Question

I'm trying my hand in designing an application in JavaScript that is object oriented with help from jQuery. However, I've run into issues when using the jQuery event handlers within my application's class. Here is the offending snippet of code:

<script type="text/javascript">
function Library(s_list) {
    this.songs = s_list;
    this.song_table = $('#songs');
    this.search_input = $('#search-txt');

    this.refresh_table = function() {
        this.song_table.html('<tr id="fields"><td></td><td>Name</td><td>Artist</td><td>Album</td><td>Time</td></tr>');

        for ( index in this.songs ) {
            if ( (index % 2) == 0 ) {
                this.song_table.append('<tr class="l"><td></td><td>' + this.songs[index] + '</td><td>Artist</td><td>Album</td><td>Time</td></tr>');
            } else {
                this.song_table.append('<tr class="d"><td></td><td>' + this.songs[index] + '</td><td>Artist</td><td>Album</td><td>Time</td></tr>');
            }
        }
    }

    this.filter_songs = function(text) {
        // Not implemented
    }

    this.search_input.keyup(function() {
        var sender = $(this);
        var s = $.trim(sender.val());

        // I need to access the filter_songs method of the Library class here. Normally I would use "this" but jQuery uses it for the html object that triggered the event
    });

    this.refresh_table();
}

var library;

$(document).ready(function() {
    library = new Library(song_list);

});

</script>

The problem is I need to access the filter_songs method of the Library class from the jQuery search_input.keyup event handler. Normally I would use "this" but jQuery uses it for the html object that triggered the event. Am I approaching the design of this application wrong, or is there a way to fix this issue? Thanks for the help.

Mrchief · Accepted Answer · 2011-06-30 02:04:27Z

3

You need a closure. Try this:

var self = this;
this.search_input.keyup(function() {
            var sender = $(this);
            var s = $.trim(sender.val());
            self.filter_songs(s);
        });

answered Jun 30, 2011 at 2:04

Mrchief

76.4k20 gold badges145 silver badges193 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Jacquay Over a year ago

Thanks! That was just what I needed. It was an obvious solution but I guess my brain isn't working well today.

Mrchief Over a year ago

:) we'll go thru cloudy days!

Collectives™ on Stack Overflow

How to access object method within jQuery event

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related