Trying to rewrite this using arrow syntax

Question

I thought I could do this:

$('body').on('focus', '[contenteditable]', e => {
        var self = $(e)
        self.data('before', self.html())
        return self
})

but it's saying: "Cannot read property 'createDocumentFragment' of undefined"

$('body').on('focus', '[contenteditable]', myfocus)

function myfocus() {
  var self = $(this)
  self.data('before', self.html())
  return self
}

p {
cursor:pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p contenteditable>Click here to edit</p>

Answer 1

You have to use $(e.target);

In myfocus function, this is a reference that refers to the DOM element that triggered the event.

In the jquery function, this refers to the event created, so you can access the DOM element using event.target.

event.target property returns the element that triggered the event.

$('body').on('focus', '[contenteditable]', (e) => {
        var self = $(e.target);
        self.data('before', self.html())
        return self;
})

p {
cursor:pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p contenteditable>Click here to edit</p>