Add and remove active class event listener to dynamically generated buttons
Question
I am trying to add active classes such as on hover color change, onclick have an active color and remain that color on the button as I move forward to click different buttons. I want to remove all these active color on calling remove class. How can I add these active classes to dynamically created buttons? this is how buttons appear after adding eventlisteners.
$(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 answers
solution1
1 ACCPTED 2018-05-07 06:00:38
Your code and your description are not match! I explain what I understand from your question:
1-on hover color change You need to define some events on buttons like below. modify these with your own
btn.on('mouseenter', function() {
$(this).css('border', '2px solid #5F5A66');
});
btn.on('mouseout', function() {
$(this).css('border', '1px solid #5F9A99');
});
2-onclick have an active color and remain that color on the button as I move forward to click different buttons.
You need to define onclick event with JQuery for each button when you create them. like
btn.on('click', function() {
$(this).addClass('btn-primary');
});
3-remove all these active color on calling remove class.
You must loop through all buttons and reset your styles.
$("#reset").on('click', function(){
$('#areaForSets button').each(function(itm) {
$(this).css({'border': '1px solid #5F9A99'}).removeClass('btn-primary');
});
})
Your final code will be something like this:
$(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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.