主页 / coding / 问题 / 79226197
Accepted
gchq
Asked: 2024-11-26 18:07:43 +0800 CST

当按钮文本为动态时，按钮中的 Bootstrap 微调器不起作用

  • 772

各种表单都加载到模态中，保存的数据使用按钮文本（“保存”插入新记录，“更新”更新现有记录……）下面的代码片段中有两个按钮 - “插入”和“标准” - 当启动标准模态时，微调器可以工作，但当更改按钮文本时，微调器则无法工作。有什么想法可以解决这个问题吗？

$('#insertButton').on('click', function() {
  $('#testButton').text('Save');
  $('#testModal').modal('show');
})

$('#standardButton').on('click', function() {
  
  $('#testModal2').modal('show');
})
  
<
-<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous"></script>


<div class="container">
  <button type="button" id="insertButton">Insert</button>
  <button type="button" id="standardButton">Standard</button>
</div>





<div class="modal" id="testModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" id="testButton" class="btn btn-primary">
   <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>     
        </button>
      </div>
       </div>
  </div>
</div>


<div class="modal" id="testModal2" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" id="testButton2" class="btn btn-primary">
   <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>  
        Save
        </button>
      </div>

bootstrap-5

1 个回答

  1. Best Answer

    该方法通过覆盖元素的所有子节点（包括常规标签）text()来设置元素的内容。

    为了确保仅更改文本，同时所有其他子项保持不变：

    1. 删除所有类型的节点TEXT_NODE。
    2. 附加一个包含所需文本的新文本。

    $('#insertButton').on('click', function() {

  $('#testButton').contents().filter(function() {
    return this.nodeType == Node.TEXT_NODE;
  }).remove();
  $('#testButton').append(' Insert');

  $('#testModal').modal('show');
});

$('#standardButton').on('click', function() {

  $('#testModal2').modal('show');
});
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>


<div class="container">
  <button type="button" id="insertButton">Insert</button>
  <button type="button" id="standardButton">Standard</button>
</div>

<div class="modal" id="testModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" id="testButton" class="btn btn-primary">
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
          </button>
      </div>
    </div>
  </div>
</div>

<div class="modal" id="testModal2" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" id="testButton2" class="btn btn-primary">
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
            Save
          </button>
      </div>
    </div>
  </div>
</div>

    • 1

相关问题