JQuery2 error by adding html after element

Question

I tried adding HTML after the element with these simple lines: HTML to copy:

<div class="commentLayout">
    <form method="post" action="...">
        <textarea cols="10" rows="10" name="taCommentContent">
        </textarea>
        <input type="hidden" name="newsId" value="">
        <button type="submit" class="btn btn-success">speichern</button>
    </form>
</div>

And this is the part of JavaScript that adds it:

function createComment (id)
{
    var $comment = $(".commentLayout").first().clone();
    $comment.removeClass("commentLayout").addClass("commentEdit");
    $comment.find("input[name=newsId]").first().val(id);
    $(this).after($comment);
}

The following error is displayed in the browser console (with the source map):

jquery2x.min.js:3 Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined
buildFragment @ jquery2x.min.js:3
domManip @ jquery2x.min.js:3
after @ jquery2x.min.js:
createComment @ frontend.js:716(anonymous function) @ VM219:1

I know what undefined means, but how did this error come about? I do not understand what is wrong here. To clear my question, I call this function from a link, for example:

<!-- variable numbers comes from a loop -->
<a href="javascript:createComment(1);">comment this</a>

Answer 1

The problem is in this line:

$(this).after($comment);

The default value for this is the window object. In the following snippet, you can see the way you call your function and the value of "this".

JQuery has the ability to change the context of a function:

$.proxy(createComment, this)(1);

javaScript :

createComment.call(this, 1);

createComment.apply(this, [1]);

- "this" , .

:

function createComment (obj, id)
{
  var $comment = $(".commentLayout").first().clone();
  $comment.removeClass("commentLayout").addClass("commentEdit");
  $comment.find("input[name='newsId']").first().val(id);
  $(obj).after($comment);
  console.log('this is: ' + this + ' while obj is: ' + obj);
}

$(document).on('click', 'button[type="submit"]', function(e) {
  e.preventDefault();
  createComment(this, 1);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="commentLayout">
    <form method="post" action="...">
        <textarea cols="10" rows="10" name="taCommentContent">
        </textarea>
        <input type="hidden" name="newsId" value="">
        <button type="submit" class="btn btn-success">speichern</button>
    </form>
</div>

Hide result

UPDATE

undefined. this - , (jQuery) . jQuery.after() DOM.

:

function createComment (obj, id)
{
  var $comment = $(".commentLayout").first().clone();
  $comment.removeClass("commentLayout").addClass("commentEdit");
  $comment.find("input[name='newsId']").first().val(id);
  $(obj).after($comment);
  console.log('this is: ' + this + ' while obj is: ' + obj);
  return false;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- variable numbers comes from a loop -->
<a href="javascript:createComment(document.getElementsByClassName('commentLayout')[0], 1);">comment this</a>
<div class="commentLayout">
    <form method="post" action="...">
        <textarea cols="10" rows="10" name="taCommentContent">
        </textarea>
        <input type="hidden" name="newsId" value="">
        <button type="submit" class="btn btn-success">speichern</button>
    </form>
</div>

Hide result