函数中的Javascript访问对象变量

Question

function init_exam_chooser(id,mode)
{
    this.id=id;
    this.table=$("#" + this.id);

    this.htmlRowOrder="<tr>" + $("#" + this.id + " tbody tr:eq(0)").html() + "</tr>";
    this.htmlRowNew="<tr>" + $("#" + this.id + " tbody tr:eq(1)").html() + "</tr>";
    $("#" + this.id + " tbody tr").remove();

    //Arxikopoiisi
    var rowNew=$(this.htmlRowNew);

    rowNew.find("input[type='text']").eq(0).autocomplete({
        source: function (req,resp)
        {

            $.ajax({
                url: "/medilab/prototypes/exams/searchQuick",
                cache: false,
                dataType: "json",
                data:{codeName:req.term},
                success: function(data) {
                    resp(data);
                }
            });

        },
        focus: function(event,ui)
        {
            return false;
        },
        minLength :2

    });

    rowNew.find("input[type='text']").eq(1).autocomplete({
        source: function (req,resp)
        {

            $.ajax({
                url: "/medilab/prototypes/exams/searchQuick",
                cache: false,
                dataType: "json",
                data:{name:req.term},
                success: function(data) {
                    resp(data);
                }
            });

        },
        focus: function(event,ui)
        {
            return false;
        },

        minLength :2
    });
    rowNew.find("input[type='text']").bind( "autocompleteselect", function(event, ui) {
        alert(htmlRowOrder);
        var row=$(htmlRowOrder);

        $(table).find("tbody tr:last").before(row);
        alert(ui.item.id);
});
    rowNew.appendTo($(this.table).find("tbody"));


//this.htmlRowNew

}

The problem is at ,how i can access htmlRowOrder? I tried this.htmlRowOrder and didnt work.... Any ideas??

rowNew.find("input[type='text']").bind( "autocompleteselect", function(event, ui) {
            alert(htmlRowOrder);
            var row=$(htmlRowOrder);

            $(table).find("tbody tr:last").before(row);
            alert(ui.item.id);
    });

Answer 1

Your issue is that this is not what you think it is inside your event handlers. Most jQuery event handlers run in the context of the element on which the event was triggered; what that means is that inside the event handler, this is the element on which the event was triggered.

You can solve this problem either by waiting for the next revision of JavaScript, which will have Function.prototype.bind baked in, or by setting a reference to your scope object outside the event handler and referring to it inside, similarly to patrick's answer.

function(){
    var instance = this;
    this.foo = "abc123";
    $('someselector').click(function(ev){
        this.foo; //causes an error; foo is now the element matching 'someselector'
        instance.foo; //this returns "abc123"
    }
}

Answer 2

Here's a reasonably thorough explanation of the this keyword:

http://www.quirksmode.org/js/this.html

Answer 3

You could define the variable outside the function.

var rowNew;

function init_exam_chooser(id,mode) {
    ...
    rowNew=$(this.htmlRowNew);
    ...
}

rowNew...

Of course, you will have to call the function before rowNew will reference the value you want to work with.

---

I used a different variable, but the principle is the same.

Or, you could have your function return the value you want.

function init_exam_chooser(id,mode) {
    // Do stuff
    return myVariable;
}

var anotherVariable = init_exam_chooser(id,mode);