时间戳

首页 > 解决方案 > insertBefore(), before() & Closest - 在我需要的地方插入数据

javascript - insertBefore(), before() & Closest - 在我需要的地方插入数据

问题描述

我正在尝试class="replydivider"使用 insertBefore() 在分隔符之前插入一些 HTML，但我无法让它工作。这是我的代码：

   <div class="col-sm-12 mb-2 replydivider">
   <div class="row">
     <div class="col-sm-2 offset-1">
       <img src="/assets/uploads/user/<?=$_SESSION['userImage'];?>" class="border rounded-circle comment-user-img mr-3">
      </div>
      <div class="col-sm-8 rounded form-inline">
        <form method="POST" class="form-group reply-form">
          <input type="text" name="comment" class="form-control mr-2" placeholder="Reply here" required>
          <input type="hidden" name="postId" value="<?=$id?>">
          <input type ="hidden" name="replyId" value="<?=$row['commentId'];?>">
        <input type="submit" class="btn-sm btn-primary" value="Reply">
      </form>
      </div>
    </div>
   </div>

我遇到的问题是它必须在相对于提交的表单的 div 之前插入，因为页面上会有很多回复分隔符和表单。

我尝试了以下无数种变化，但无法使其正常工作：

$(this).closest('.replydivider').before(data);

$(this).closest('div').find(".replydivider").before(data);

$(this).closest('form').find(".replydivider").before(data);

$(data).insertBefore('.replydivider');

任何指导将不胜感激。

编辑：

这是我的jQuery函数：

$(function () {
  $('.reply-form').on('submit', function (e) {
        e.preventDefault();

        $.ajax({
          type: 'post',
          url: '/comment/addComment',
          data: $(this).serialize(),
          success: function (data) {
              alert('test');
              var test = "<p>Sample data</p>";
              $(this).closest('.replydivider').before(test);
          }
        });
        $(this).closest('form').find("input[type=text]").val("");
        });
    });

有趣的是，如果我把这$(this).closest('.replydivider').before(test);条线放在 ajax 调用之外，它可以工作，但不能在里面。我将警报放在那里以测试它是否成功返回，并且确实如此。

标签： javascriptjquery

解决方案

.ajax()

所有回调中的this引用是设置中传递给的上下文选项中的对象$.ajax；如果未指定上下文，则这是对 Ajax 设置本身的引用。

如果您希望this在回调中成为接收事件的元素，则设置 Ajax 的 context 属性，如：

.......
context:this,
success: function (data) {
.......

推荐阅读