我正在尝试添加事件类，例如悬停颜色更改、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>最佳答案
您的代码和您的描述不匹配!我解释一下我从你的问题中了解到的内容:
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>关于javascript - 向动态生成的按钮添加和删除事件类事件监听器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50207007/