Question

I think that I am misunderstanding something about how jquery $(this) works. In my code below:

$(document).delegate(".ISBN_number", "change", 
        function()
        {
            var isbnNum = $(this).val();
            console.log("isbnNum = " + isbnNum);
            $.get("validate_isbn.php", {isbn: isbnNum},
                function(answer) 
                {                   
                    console.log("answer = " + answer);    //this does display the correct content
                    if (answer == true)
                    {   console.log("entered answer");
                        $(this).after("<img src='pics/green_checkmark.png' class='checkmark'>");
                    }
                    else 
                    {
                        $(this).after("nope");
                    }
            });             
    });

I am trying to select any input tag when its contents are changed. When I call $(this) in the code, I assumed that it would refer back to this input tag but it doesn’t. What is my issue? Is it because I used .delegate? (I needed to use this because the input tags are generated dynamically later on, they don’t exist in the original code.) How can I fix this?

Answer 1

If you want to access this from the .delegate() call, then you have to save it into a local variable because this is set to something different in the completion function for the ajax call. You can do that like this:

$(document).delegate(".ISBN_number", "change", 
        function()
        {
            var self = this;
            var isbnNum = $(this).val();
            console.log("isbnNum = " + isbnNum);
            $.get("validate_isbn.php", {isbn: isbnNum},
                function(answer) 
                {                   
                    console.log("answer = " + answer);    //this does display the correct content
                    if (answer == true)
                    {   console.log("entered answer");
                        $(self).after("<img src='pics/green_checkmark.png' class='checkmark'>");
                    }
                    else 
                    {
                        $(self).after("nope");
                    }
            });             
    });