Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined (using wysiwyg)

Question

Here is my jQuery:

$(".wysiwygtext").on("keyup keypress paste mouseup", function (e, t) {
    clearTimeout(timeout);
    timeout = setTimeout(function (e, t) {
        var element = $(this).html(); //throws 'Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined'
        var value = $(this).val(); //throws 'Uncaught TypeError: Cannot read property 'toLowerCase' of undefined' error

        console.log(element);
        console.log(value);
    }, 2000);
});

.wysiwyg is a class applied to certain divs, like so (html is generated from the server):

<div class='wysiwygtext' data-guid='" + statementGuid + "' value='" + statementGuid + "'>" + lastbody + "</div>

I just need to retrieve the contents of the div (html) and the value (or ID) of the div upon any text change, but I am getting this error:

Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined

Thank you for any assistance.

Answer 1

Basically, this was a bunch of undefined references. This is how I ended up solving this:

var timeout = null;
$(".wysiwygtext").on("keyup keypress paste mouseup", function (e, t) {
  clearTimeout(timeout);
  var element = $(this).html();
  var value = $(this).val();
  timeout = setTimeout(function (e, t) {
    console.log(element);
    console.log(value);
  }, 2000);
});

I defined timeout outside the function, as clearTimeout(timeout); was throwing a timeout is undefined error. Next, I defined element and value outside of the timeout as $(this).html() and $(this).val() weren't referencing the right thing. Lastly, I kept console.log(element) and colsole.log(value) inside the timeout, so they will log 2 seconds after one of the above events.