如何访问jQuery事件中的对象方法

How to access object method within jQuery event

本文关键字:事件 对象 方法 jQuery 何访问 访问      更新时间:2023-09-26

在jQuery的帮助下,我正在尝试用JavaScript设计一个面向对象的应用程序。但是,在应用程序的类中使用jQuery事件处理程序时,我遇到了一些问题。以下是有问题的代码片段:

<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>

问题是我需要从jQuery search_input.keyup事件处理程序访问Library类的filter_songs方法。通常我会使用"this",但jQuery将其用于触发事件的html对象。我对这个应用程序的设计是错误的,还是有办法解决这个问题?谢谢你的帮助。

您需要一个闭包。试试这个:

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