通過在元素后附加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>