How to make the following jQuery snippet work?

Question

var func = function()
{
    $(this).hide();
    $parent = $(this).parent();
    $parent.removeClass('my_signature_mouseover');
    var text = $(this).val();
    var $span = $("#status span");
    $span.text(text);
    $span.show();
};
$("#status input").keyup(function (e) {
    var keyCode = e.keyCode || e.which;
    if (keyCode == 13) {
       func();
    }
}).blur(func);

I want to make func run if blur or pressing "Enter" on it. But the above code works only when blur, in the case of pressing "Enter",it reports "Permission denied to access parentNode".

Although I know it's something related with this keyword in different context,I've no idea how to fix it.

Answer 1

Try this:

var func = function(elem)
{
    elem.hide();
    var $parent = elem.parent();
    $parent.removeClass('my_signature_mouseover');
    var text = elem.val();
    var $span = $("#status span");
    $span.text(text);
    $span.show();
};
$("#status input").keyup(function (e) {
    var keyCode = e.keyCode || e.which;
    if (keyCode == 13) {
       func($(this));
    }
}).blur(function () {
    func($(this));
});

Answer 2

You are calling the func, with a normal function call, that causes inside func, the this variable will refer to the global object (window).

You have to execute the function with call, in order to preserve the context (the 'this' value), which is the element that triggered the event:

$("#status input").keyup(function (e) {
    var keyCode = e.keyCode || e.which;
    if (keyCode == 13) {
       e.preventDefault(); // stop event propagation
       func.call(this);
    }
}).blur(func);