点击Home页提交按钮，在另一nav-pill中添加Bootstrap卡片的实现方案

Hey there! Let's troubleshoot why your Bootstrap card isn't showing up in the Previous Entry tab as expected. I'll break down the likely issue and walk you through a fix step by step.

What was probably going wrong with your original code #

The before() method in jQuery inserts content outside and before the target element—not inside it. If your .previously class is the content container for the Previous Entry tab, using before() would place the card above the container (not inside it), so it wouldn't be visible when you switch to that tab.

Fixed Solution #

First, let's confirm your HTML structure matches Bootstrap's tab pattern, then adjust the jQuery logic to insert the card correctly inside the tab's content area.

Step 1: Ensure your HTML tab structure is correct

<!-- Tab Navigation -->
<ul class="nav nav-tabs" id="entryTabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="previous-tab" data-bs-toggle="tab" data-bs-target="#previous-entry" type="button" role="tab">Previous Entry</button>
  </li>
</ul>

<!-- Tab Content -->
<div class="tab-content" id="entryTabContent">
  <!-- Home Tab (with Submit Button) -->
  <div class="tab-pane fade show active" id="home" role="tabpanel">
    <button id="submit-card-btn" class="btn btn-primary mt-3">Submit New Card</button>
    <!-- Optional: Hidden template card if you want to clone instead of hardcoding -->
    <div class="card d-none" id="card-template">
      <div class="card-body">
        <h5 class="card-title">New Entry</h5>
        <p class="card-text">This entry was added from the Home tab.</p>
      </div>
    </div>
  </div>

  <!-- Previous Entry Tab (Card Container) -->
  <div class="tab-pane fade" id="previous-entry" role="tabpanel">
    <div class="previously">
      <!-- New cards will be inserted HERE -->
    </div>
  </div>
</div>

Step 2: Updated jQuery Code

This code will either clone a template card or create one from scratch, then insert it inside the Previous Entry tab's container. We'll also add an optional auto-switch to the Previous tab after submission.

$(document).ready(function() {
  $('#submit-card-btn').on('click', function(e) {
    e.preventDefault(); // Prevent default form submission if button is in a form

    // Option 1: Create a card from HTML string
    const newCard = `
      <div class="card mb-3">
        <div class="card-body">
          <h5 class="card-title">New Entry</h5>
          <p class="card-text">Submitted at ${new Date().toLocaleString()}</p>
        </div>
      </div>
    `;

    // Option 2: Clone the hidden template card (uncomment if using the template)
    // const newCard = $('#card-template').clone().removeClass('d-none');

    // Insert the card INTO the .previously container (use prepend for top, append for bottom)
    $('.previously').prepend(newCard);

    // Optional: Auto-switch to the Previous Entry tab after submission
    $('#previous-tab').tab('show');
  });
});

Key Checks to Verify #

1. jQuery Load Order: Make sure jQuery is loaded before your custom script (and before Bootstrap JS if you're using Bootstrap's tab functionality).
2. Selector Accuracy: Run console.log($('.previously')) in your browser's dev tools to confirm the selector targets the correct container—if it returns an empty array, your class name is wrong.
3. DOM Readiness: Wrapping your code in $(document).ready() ensures it runs only after the page's DOM is fully loaded.

This should fix the issue and get your Bootstrap cards showing up in the Previous Entry tab exactly as you want!

内容的提问来源于stack exchange，提问作者Taruna Jindal