通过在元素后附加html来导致jQuery2错误

Question

I tried to append HTML after an element with this 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 JavaScript part that appends 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);
}

In browser console (with source map) it shows me the following error:

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 came this error? I do not understand what went wrong here. To clearify my question, I call this function from an link like this:

<!-- 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 value of "this" is by default the window object. In the following snippet you may see a way to call your function and the value of "this" keyword.

In jQuery there is a possibility to change the context of a function:

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

and in javaScript you can use:

createComment.call(this, 1);

or

createComment.apply(this, [1]);

An alternative way is to pass as argument the "this" context variable to the function like in the snippet.

The snippet:

 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> 

UPDATE

You do not have any undefined value. Because the variable this is the window object you cannot insert after (jQuery) an object. You need a valid DOM object in order to apply the jQuery.after()....

New snippet using the anchor:

 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>