Question

For some reason I can’t refer to the element I’m editing as $(this) when I use the onreset handler.

However, I can use use $(this) in my callback. I’m sure onreset works because I’ve done an alert. Furthermore, when I do an alert on $(this).attr('id') I get “undefined”.

What’s going on?

CODE

    $('.edit').editable('ajax/save.php?editnotetext', {
                type : 'mce',
                submit : '<button class="save_button">Save</button>',
                cancel : '<button class="cancel_button">Cancel</button>',
                event: 'dblclick',
                placeholder : 'Doubleclick to edit...',
                indicator : 'Saving...',
                tooltip : 'Doubleclick to edit...',
                onblur: 'custom',
                callback : function(){
                          console.log('unlocked');
                          $.post('ajax/save.php?unlocknotetext', {"id" : $(this).attr('id')});
                },
                onreset : function(){
                          console.log('unlocked');
                          //myId = $(this).attr('id');
                          //alert(myId); this shows up as undefined!
                          //alert("onreset works!");
                          $.post('ajax/save.php?unlocknotetext', {"id" : $(this).attr('id')});
                }

});

Answer 1

this comment seems to explain it:

It seems inside onreset and onsubmit, this points to the form, not its container, so you have to use $(this).parent() instead.

An easy fix would be to do this:

$('.edit').each(function() {
    var $this = $(this);
    $this.editable(... /* use $this instead of $(this) here*/)
});