javascript - 通过在元素后附加 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”的值默认是窗口对象。在以下代码片段中，您可能会看到一种调用函数的方法和“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>

更新

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

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