单击按钮时如何在另一个导航药丸中添加引导卡答案

【问题标题】：How to add a bootstrap card in another nav-pill while button is clicked in one单击按钮时如何在另一个导航药丸中添加引导卡
【发布时间】：2019-06-29 10:28:12
【问题描述】：

我希望在单击主页中的提交按钮时将卡片插入上一个条目中。我试图制作一个 jquery 函数，其中我将代码存储在一个变量中，然后添加了 usingbefore。

$(document).ready(function() {

  $("button[name='newstubtn']").click(function() {
    var domElement = $('<div class="card" style="width: 50rem;"><div class="card-body"><h5 class="card-title">Registration Number</h5><h6 class="card-subtitle mb-2 text-muted">123456</h6><p class="card-text"><form><div class="form-group"><label for="exampleFormControlFile1">Document 1</label><input type="file" class="form-control-file" id="exampleFormControlFile1" name="file1" value=""></div><div class="form-group"><label for="exampleFormControlFile1">Document 2</label><input type="file" class="form-control-file" id="exampleFormControlFile2" name="file2"></div><div class="form-group"><label for="exampleFormControlFile1">Document 3</label><input type="file" class="form-control-file" id="exampleFormControlFile3" name="file3"></div><div class="form-group"><label for="exampleFormControlFile1">Document 4</label><input type="file" class="form-control-file" id="exampleFormControlFile4" name="file4"></div><div class="form-group"><label for="exampleFormControlFile1">Document 5</label><input type="file" class="form-control-file" id="exampleFormControlFile5" name="file5"></div><div class="form-group"><label for="exampleFormControlFile1">Document 6</label><input type="file" class="form-control-file" id="exampleFormControlFile6" name="file6"></div></form></p><a href="#" class="card-link">Check Progress</a></div></div>');
    $(".previously").before(domElement);
  });

});
/*this is the code passed in the card
<div class="card" style="width: 50rem;">
  <div class="card-body">
    <h5 class="card-title">Registration Number</h5>
    <h6 class="card-subtitle mb-2 text-muted">123456</h6>
    <p class="card-text">
      <form>
                      <div class="form-group">
                        <label for="exampleFormControlFile1">Document 1</label>
                        <input type="file" class="form-control-file" id="exampleFormControlFile1" name="file1" value="">
                      </div>
                      <div class="form-group">
                        <label for="exampleFormControlFile1">Document 2</label>
                        <input type="file" class="form-control-file" id="exampleFormControlFile2" name="file2">
                      </div>
                      <div class="form-group">
                        <label for="exampleFormControlFile1">Document 3</label>
                        <input type="file" class="form-control-file" id="exampleFormControlFile3" name="file3">
                      </div>
                      <div class="form-group">
                        <label for="exampleFormControlFile1">Document 4</label>
                        <input type="file" class="form-control-file" id="exampleFormControlFile4" name="file4">
                      </div>
                      <div class="form-group">
                        <label for="exampleFormControlFile1">Document 5</label>
                        <input type="file" class="form-control-file" id="exampleFormControlFile5" name="file5">
                      </div>
                      <div class="form-group">
                        <label for="exampleFormControlFile1">Document 6</label>
                        <input type="file" class="form-control-file" id="exampleFormControlFile6" name="file6">
                      </div>
      </form>
    </p>
    <a href="#" class="card-link">Check Progress</a>
   </div>
</div>
*/

.side-bar {
  margin-top: 10px;
  background: rgba(218, 227, 242, 0.5);
  height: 700px;
  text-align: center;
}

.side-link {
  margin-top: 10px;
}

.main {
  margin-top: 50px;
}

.profile img {
  height: 200px;
  width: auto;
  border-radius: 50%;
  background: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://unpkg.com/gijgo@1.9.11/js/gijgo.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-3 side-bar">
      <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        <div class="nav-link profile">
          <img src="download.png" class="img-fluid img-profie">
        </div>
        <a class="nav-link side-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
        <a class="nav-link side-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
        <a class="nav-link side-link" id="v-pills-previous-entry-tab" data-toggle="pill" href="#v-pills-previous-entry" role="tab" aria-controls="v-pills-previous-entry" aria-selected="false">Previous Entry</a>
        <a class="nav-link side-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
      </div>
    </div>
    <div class="col-9 main">
      <div class="tab-content" id="v-pills-tabContent">
        <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
          <h3>Welcome Level one</h3>
          <form>
            <div class="form-group">
              <label for="reg-no">Registration Number</label>
              <input type="text" class="form-control" id="reg-no" name="reg-no" placeholder="Registration Number">
            </div>
            <div class="form-group">
              <label for="exampleFormControlFile1">Document 1</label>
              <input type="file" class="form-control-file" id="exampleFormControlFile1" name="file1">
            </div>
            <div class="form-group">
              <label for="exampleFormControlFile1">Document 2</label>
              <input type="file" class="form-control-file" id="exampleFormControlFile2" name="file2">
            </div>
            <div class="form-group">
              <label for="exampleFormControlFile1">Document 3</label>
              <input type="file" class="form-control-file" id="exampleFormControlFile3" name="file3">
            </div>
            <div class="form-group">
              <label for="exampleFormControlFile1">Document 4</label>
              <input type="file" class="form-control-file" id="exampleFormControlFile4" name="file4">
            </div>
            <div class="form-group">
              <label for="exampleFormControlFile1">Document 5</label>
              <input type="file" class="form-control-file" id="exampleFormControlFile5" name="file5">
            </div>
            <div class="form-group">
              <label for="exampleFormControlFile1">Document 6</label>
              <input type="file" class="form-control-file" id="exampleFormControlFile6" name="file6">
            </div>
            <button type="submit" id="newstubtn" name="newstubtn" class="btn btn-primary btn-lg btn-block">Add New Student Entry For Process</button>

          </form>
          <!--<button type="button" class="btn btn-outline-info" name="addDom">Add new Student</button>-->
        </div>
        <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
          <div class="profile">
            <img src="download.png" class="img-fluid img-profie">
          </div>
          <div>
            <form>
              <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" id="name" name="name" value="Mr/Ms Level One">
              </div>
              <div class="form-group">
                <label for="exampleFormControlFile1">Digital Signature</label>
                <input type="file" class="form-control-file" id="exampleFormControlFile1" name="DigSig">
              </div>
            </form>
          </div>
        </div>
        <div class="tab-pane fade previously" id="v-pills-previous-entry" role="tabpanel" aria-labelledby="v-pills-previous-entry-tab">The previously entered students with their details</div>
        <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
          <form>
            <div class="form-group">
              <label for="ChangeName">Changed Name</label>
              <input type="text" class="form-control" id="name" name="name" placeholder="Name">
            </div>
            <div class="form-group">
              <label for="changedDigitalSignature">Choose New Digital Signature</label>
              <input type="file" class="form-control-file" id="changedDigitalSignature" name="ChangedDigSig">
            </div>
            <div class="form-group">
              <label for="changedprofile">Choose New Profile Picture</label>
              <input type="file" class="form-control-file" id="changedprofile" name="changedprofile">
            </div>
            <button type="submit" id="changesbutton" class="btn btn-primary btn-lg btn-block" name="changesbutton">Done</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： javascript jquery html bootstrap-4

【解决方案1】：

这是一个结构合理的问题。感谢您明确说明您想要做什么，并制作了完整的格式化代码示例。

您面临的问题是表单的默认功能，即更改页面。即使表单标签中没有action= 属性，只要您点击带有type="submit" 属性的按钮，该表单就会尝试去某个地方。如果未指定任何位置，则它将重新加载页面 - 丢失您正在尝试执行的操作。

如果您从以下位置更改代码：

$("button[name='newstubtn']").click(function() {

到

$('form').submit(function(){

与

添加一行

return false;

作为该函数的最后一行 - 您应该能够看到您想要的效果（假设您的其余代码有效 - 我没有检查）。

您需要告诉我们更多关于您希望 END RESULT 是什么的信息（即为什么您使用带有提交按钮的表单结构），以便我们为您提供进一步的建议。但是对于这个问题，情况就是这样。

【讨论】：