javascript - 为什么添加新 block 后折叠/展开不起作用?

标签 javascript html twitter-bootstrap

为什么我的 js 代码不起作用?它之前有效,但当我添加下一个 block 时它不起作用:

<div class="collapse" id="collapse-block">

我有折叠 block ( id='collapse-block' ),里面有 3 个其他折叠 block 。此 js 代码适用于按钮 ( id='expand-collapse' ),它将展开/折叠 block 在 div ( id='blocks' ) 内

$(function() {
  $('#expand-collapse').on('click', function() {
    var allCollapsed = true;
    $('#blocks .collapse').each(function(i, block) {
      if ($(block).hasClass('show')) {
        allCollapsed = false;
      }
    });
    $('#blocks .collapse').each(function(i, block) {
      if (allCollapsed) {
        $(block).collapse('show');
      } else {
        $(block).collapse('hide');
      }
    });
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="card">
  <div class="card-header">
    <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#collapse-block" aria-expanded="false" aria-controls="collapse-block">OPEN/CLOSE</button>

    <button id='expand-collapse' type="button">OPEN/CLOSE BLOCKS</button>
  </div>

  <div class="card-block">
    <div class="collapse" id="collapse-block">
      <div id="blocks">
        <div class="list-group">

          <div class="list-group-item">
            <a data-toggle="collapse" href="#block-1" aria-expanded="false" aria-controls="block-1">FIRST BLOCK</a>
            <div class="collapse block" id="block-1">
               FIRST BLOCK
            </div>
          </div>

          <div class="list-group-item">
            <a data-toggle="collapse" href="#block-2" aria-expanded="false" aria-controls="block-2">SECOND BLOCK</a>
            <div class="collapse block" id="block-2">
              SECOND BLOCK
            </div>
          </div>

          <div class="list-group-item">
            <a data-toggle="collapse" href="#block-3" aria-expanded="false" aria-controls="block-3">THIRD BLOCK</a>
            <div class="collapse block" id="block-3">
              THIRD BLOCK
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

最佳答案

根据 javascript 标准,每当您修改 DOM、添加或删除子项时,事件就会被删除,您将不得不再次添加事件。这是这里的问题。我猜。

编辑

修改innerHTML会导致重新解析内容并重新创建DOM节点,从而丢失已附加的处理程序。像第一个示例中那样附加元素不会导致该行为,因此不必重新解析,因为您显式修改了 DOM 树。

处理这个问题的另一个好方法是使用 insertAdjacentHTML()。例如:

document.body.insertAdjacentHTML('beforeend', '<br>')

关于javascript - 为什么添加新 block 后折叠/展开不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43914888/

相关文章:

javascript - 使用 jQuery 加密并使用 C# 解密

html - CSS 导航栏固定,无法滚动

html - 如何检测 angular.js 中的 keydown 或 keypress 事件?

javascript - 如何在命令中添加javascript变量

javascript - react native : running JS code from Java Module in background with AlarmManager

javascript - 在scrollTop 中使用时,jQuery animate() 在 margin-left 上无法正常工作

html - 如何使用 CSS 设置代码列表的样式?

javascript - Angular UI Bootstrap : how to add first option to select?

html - 如何在不同行 Bootstrap 之间反转 div

javascript - 函数未按计划调用