时间戳

首页 > 解决方案 > 为什么我的 insertBefore() 只添加 1 个元素？

html - 为什么我的 insertBefore() 只添加 1 个元素？

问题描述

我有一个功能，当单击按钮时，卡片显示在第一张卡片之后。但是当我再次单击该按钮时，它不起作用，并且控制台中没有显示错误。

**

$(function() {
    var $budget = $('<div class="card-single"> <div class="card-body"> <span class="fas fa-coins"></span> <div> <h5>{{ date_posted }}</h5> <h4>$30,659.45</h4> </div> </div> <div class="card-footer"> <a href="">Add Expenses</a> </div> </div>')

    $('.add-budget').on('click', function() {
        $budget.insertBefore('.card-single:last');
    })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
<main>
            <div class="head">
                <h2 class="dash-title">Budgets</h2>
                <button class="add-budget">Add Budget</button>
            </div>

            <div class="dash-cards">
                <div class="card-single">
                    <div class="card-body">
                        <span class="fas fa-coins"></span>
                        <div>
                            <h5>{{ date_posted }}</h5>
                            <h4>$30,659.45</h4>
                        </div>
                    </div>
                    <div class="card-footer">
                        <a href="">Add Expenses</a>
                    </div>
                </div>
            </div>
        </main>

**

我尝试使用 before()、prependTo()、appendTo() 和 insertAfter()，但它具有相同的输出。

标签： htmljquery

解决方案

您只创建了一个.card-single元素，在$budget- 每当单击按钮时，单个元素将被插入到新位置并从其先前位置（如果有）删除。而是在处理程序内创建元素。

$('.add-budget').on('click', function() {

  var $budget = $('<div class="card-single"> <div class="card-body"> <span class="fas fa-coins"></span> <div> <h5>{{ date_posted }}</h5> <h4>$30,659.45</h4> </div> </div> <div class="card-footer"> <a href="">Add Expenses</a> </div> </div>')
  $budget.insertBefore('.card-single:last');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <div class="head">
    <h2 class="dash-title">Budgets</h2>
    <button class="add-budget">Add Budget</button>
  </div>

  <div class="dash-cards">
    <div class="card-single">
      <div class="card-body">
        <span class="fas fa-coins"></span>
        <div>
          <h5>{{ date_posted }}</h5>
          <h4>$30,659.45</h4>
        </div>
      </div>
      <div class="card-footer">
        <a href="">Add Expenses</a>
      </div>
    </div>
  </div>
</main>

推荐阅读