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

Question

我试图用一个简单的行后面的元素追加HTML：要复制的HTML：

<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>

这是附加它的JavaScript部分：

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

在浏览器控制台（带有源映射）中，它显示以下错误：

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

我知道undefined意味着什么，但是怎么会出现这个错误？ 我不明白这里出了什么问题。 为了澄清我的问题，我从这样的链接调用此函数：

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

Answer 1

问题出在这一行：

$(this).after($comment);

“this”的值默认为window对象。 在下面的代码段中，您可能会看到一种调用函数的方法以及“this”关键字的值。

在jQuery中，有可能更改函数的上下文：

$.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> 

UPDATE

您没有任何未定义的值。 因为变量this是窗口对象，所以无法在 （jQuery）对象之后插入。 您需要一个有效的DOM对象才能应用jQuery.after（）....

使用锚点的新代码段：

 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>