为动态生成的按钮添加和删除活动类事件侦听器答案

【问题标题】：Add and remove active class event listener to dynamically generated buttons为动态生成的按钮添加和删除活动类事件侦听器
【发布时间】：2018-05-07 04:12:35
【问题描述】：

我正在尝试添加活动类，例如悬停颜色更改、onclick 具有活动颜色并在我前进以单击不同按钮时保持该颜色在按钮上。我想在调用删除类时删除所有这些活动颜色。如何将这些活动类添加到动态创建的按钮？这是添加事件监听器后按钮的显示方式。

$(document).on('click', '.btn btn-default', function() {
  alert(this.innerHTML);
});

var numOfSets = 1;
var numOfButtons = 10;

for (var j = 0; j < numOfSets; j++) {
  // create the set
  var setElement = "<div style='border: solid 1px red;display:table;width:80%;' id='set" + j + "'>";

  // create its content
  var i = 0;
  for (; i < numOfButtons; i++) {
    var setContent = "<div id='myDIV' class='btn btn-default' style='border:none;background-color: #ccc;border-radius:0;display:table-cell;'></div>";
    // Active classes are added here
    var header = document.getElementById("myDIV");
    var btns = header.getElementsByClassName("btn btn-default");
    for (var i = 0; i < numOfButtons.length; i++) {
      btns[i].addEventListener("click", function() {
        var current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
      });
    }
    setElement += setContent;

  }

  //close set div
  setElement += "</div>";
  // append to dom
  $("#areaForSets").append(setElement + "<br/>");
}


/*

    <!--<script>
    						$('.btn.btn-default').on("click",function(){ 
                            $(this).addClass('color');                        
    					});
    					
    					$('#Button1').on('click',function() {
    						// alert('click');
    						$('input:radio[name=options]').each(function () {                                      
    									$(this).prop('checked', false);
    									$(this).removeClass('color'); 
    									$(this).parent().removeClass('color'); 
    									$(this).parent().removeClass('active');
    						});                  
    					});
                      </script> -->
                      */

.btn-default {
  color: #D8D8D8;
  background-color: #D8D8D8;
  border-color: #D8D8D8;
}

.btn-default:hover {
  background-color: #5F5A66;
}

.btn-default.active {
  background-color: #4A90E2;
  color: #4A90E2;
  background-color: #4A90E2;
}

.btn-default.color {
  background-color: #4A90E2;
}

.btn-default.focus {
  background-color: #1E3B5D !important;
}

input[type=radio] {
  margin-top: -6px;
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <button class="btn btn-default">Go</button>
  <br/>
  <div id="areaForSets">

  </div>
  <div id="myDIV">

  </div>
  </body>

【问题讨论】：

还没有真正看代码，但我看到的第一件事是在循环中通过setElement += setContent; 添加<div id='myDIV'。永远不要创建具有相同 id 的多个元素。这是灾难的秘诀。元素 ID 必须是唯一的。
这段代码有几个问题，首先var header = document.getElementById("myDIV"); var btns = header.getElementsByClassName("btn btn-default"); 会尝试从 DOM 中获取元素，但它不会找到它，因为 DOM 没有这些元素。其次，id 必须是独一无二的
加上 2 个循环，嵌套，都使用 i
还有numOfButtons.length ...它不是数组也不是字符串

标签： javascript html css twitter-bootstrap button

【解决方案1】：

您的代码和您的描述不匹配！我解释一下我对您的问题的理解：

1-on 悬停颜色变化 您需要在按钮上定义一些事件，如下所示。用你自己的修改这些

btn.on('mouseenter', function() {
  $(this).css('border', '2px solid #5F5A66');
});
btn.on('mouseout', function() {
  $(this).css('border', '1px solid #5F9A99');
});

2-onclick 有一个活动颜色，当我继续点击不同的按钮时，该颜色会保留在按钮上。

您需要在创建每个按钮时使用 JQuery 定义 onclick 事件。喜欢

btn.on('click', function() { 
  $(this).addClass('btn-primary');
});

3-在调用 remove 类时删除所有这些活动颜色。

您必须遍历所有按钮并重置样式。

$("#reset").on('click', function(){
  $('#areaForSets button').each(function(itm) {
    $(this).css({'border': '1px solid #5F9A99'}).removeClass('btn-primary');
  });
})

您的最终代码将是这样的：

$(document).on('click', '.btn btn-default', function() {
  alert(this.innerHTML);
});

var numOfSets = 1;
var numOfButtons = 10;

for (var j = 0; j < numOfSets; j++) {
  // create its content
  for (var i = 0; i < numOfButtons; i++) {
    var setContent = "<button id='myDIV" + i + "' class='btn btn-default'>Test</button>";
    $("#areaForSets").append(setContent);
    // Active classes are added here
    var btn = $("#myDIV" + i);
    btn.addClass("active");
    btn.css('width', `${100/numOfButtons}%`);
    btn.on('click', function() {
      $(this).addClass('btn-primary');
    });
    btn.on('mouseenter', function() {
      $(this).css('border', '2px solid #5F5A66');
    });
    btn.on('mouseout', function() {
      $(this).css('border', '1px solid #5F9A99');
    });
  }
}

$("#reset").on('click', function() {
  $('#areaForSets button').each(function(itm) {
    $(this).css({
      'border': '1px solid #5F9A99'
    }).removeClass('btn-primary');
  });
})

<html>

<head>
  <title></title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <br/>
  <div id="areaForSets">

  </div>
  <button id="reset">Reset All</button>
</body>

</html>

【讨论】：

谢谢。这正是我想要的！
但唯一的问题是我不希望 div 宽度改变放置按钮的位置。如果按钮的数量是 30，它仍然必须占据与 10 个按钮相同的宽度。
换句话说，生成的按钮应该适应固定的div宽度。
现在试试@bhapri