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

＆＃34;这个＆＃34;的价值默认情况下是窗口对象。在下面的代码片段中，您可能会看到一种方法来调用您的函数以及＆＃34;这个＆＃34;关键字。

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

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

在javaScript中你可以使用：

createComment.call(this, 1);

或

createComment.apply(this, [1]);

另一种方法是将＆＃34; this＆＃34;作为参数传递。上传变量到函数，如代码片段。

摘录：

＆＃13;

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);
});

＆＃13;

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

＆＃13;

<强>更新

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

使用锚点的新代码段：

＆＃13;
＆＃13;
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; }
＆＃13;
<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>  <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>
＆＃13;
＆＃13;
＆＃13;

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

1 个答案: