Javascript и Ошибки области видимости JQuery

Образец кода:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<div id="myinfo">info</div>
<input id="clickme" type="button" value="click here to display info"/>

<script type="text/javascript">
    function Fighter() {
        this.name = "Kenny";    // fighters name
        this.hp = 10;           // fighters hp
        this.getHP = function() {
            return this.hp;
        }

        this.getName = function() {
            return this.name;
        }

        this.initUpdateButton = function(button_id) {
            $(button_id).click(function() {
                $("#myinfo").html("Name: "+this.getName()+"<br/>HP:"+this.getHP()); 
                // this.getName is undefined
            });
        }

    };

    var me = new Fighter();
    alert("Name: "+me.getName()+"<br/>HP:"+me.getHP()); // works properly
    me.initUpdateButton("#clickme"); // bind it to some ID
</script>

Проще говоря, учитывая класс JavaScript со смешанным JQuery, я понимаю, что при обратном вызове для функций JQuery (например, $. click ( ) ), что this относится к объекту, по которому был выполнен щелчок, а Not класс или корневая функция (). So this.getName () и this.getHP () не работают.

Но как лучше всего решить эту проблему?

Я видел несколько похожих сообщений, но они мне не пригодились, поэтому извините, если это репост, и заранее спасибо.