Thursday, May 5, 2011

Accessing $(this) within a callback function

I'm working on changing prompt() to jPrompt() since IE blocks prompt() from running. The problem is $(this) no longer works correctly because jPrompt() doesn't return a value, but uses a callback function.

So lets say I have something like this, which works:

$("a.foo").click(function(){
    $(this).text(prompt("Type Something",""));
}

When I convert it to this it breaks:

$("a.foo").click(function(){
    jPrompt("Type something:","","", function(r) {
        $(this).text(r);
    }
}

How do I access $(this) properly?

From stackoverflow
  • Try this:

    $("a.foo").click(function(){
        var that = this;
        jPrompt("Type something:","","", function(r) {
            $(that).text(r);
        }
    }
    
  • You could use a closure:

    $("a.foo").click(
      function(){
        var self = this;
        return function() {
          jPrompt("Type something:", "", "", function(r) { 
            $(self).text(r); 
          });
        }
      }()
    );
    
  • The problem is that you're trying to access the 'r' as an element. jPrompt is going to pass the text entered as 'r'.

    $("a.foo").click(function(){
        jPrompt("Type something:","","", function(r){
            alert(r); //This will show the text entered.
        });
    });
    

0 comments:

Post a Comment