JQuery blur and enter key - blur not working

Question

I'm using the following for inline editing.

I want ajax to fire when enter key pressed or user clicks away (blur)

When enter key is pressed all is ok but AJAX not firing on blur?

// inline editing
$(document).on('blur keypress', 'span[contenteditable=true]', function (e) {

    if (e.type == 'blur' || e.keyCode == '13') {

        $.ajax({
           type:'POST',
           url:'/ajax/actions/editGenre.php',
           data:{
             content: $(this).text(),
             id: $(this).attr('rowId')
           },
           success:function(msg){
             $('span[contenteditable=true]').removeClass('inlineEdit').addClass('editAble');
           }
         });

         e.preventDefault(); 

         }

});

Answer 1

Fixed: JSFiddleWiddleBiddleBoDiddle (commented out your AJAX for the fiddle and used an alert to demonstrate)

$(document).on('focusout keypress', 'span.inlineEdit', function (e) {
    e.preventDefault();
    if (e.type == 'focusout' || e.keyCode == '13') {
        $.ajax({
            type: 'POST',
            url: '/ajax/actions/editGenre.php',
            data: {
                content: $(this).text(),
                id: $(this).attr('rowId')
            },
            success: function (msg) {
                $('span.inlineEdit').removeClass('inlineEdit').addClass('editAble');
            }
        });
    }
});

Answer 2

Blur event does not fire for span tags. Use something else which is meant to receive focus.