如何从元素中取消绑定焦点事件

Question

A peculiar problem.

The script does something on 'mousedown' then executes on either event 'keypress', 'focusout', 'keyup'.

The question is how do I kill two remaining events once one of them is executed.

I've tried $(document).off() , $(this).off('focusout') , and nothing works.

Any clues?

.on('mousedown', '.task-content', function() {
    // Make DIV Editable
})

.on('keypress', '.task-content', function (e) {
    if (e.which == 13 && !e.shiftKey) {
        // Update DIV content to DB
    }
})

.on('focusout', '.task-content', function() {
    // Update DIV content to DB
})

.on('keyup', '.task-content', function (e) {
    if (e.which == 27) {
    // Return DIV to previous state
  }
})

Answer 1

Your code is working fine, maybe you might point a wrong selector .

$('.task-content').on('keypress', function (e) {
    if (e.which == 13 && !e.shiftKey) {
        // Update DIV content to DB
        alert("key press");
        $(this).off('focusout');
    }
})

$('.task-content').on('focusout', function () {
    // Update DIV content to DB
    alert("focus out ");
})

Check this JSFiddle .