CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapbutton
bhapri
bhapri

Reputation: 37

Add and remove active class event listener to dynamically generated buttons

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? enter image description here 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>

Upvotes: 0

Views: 2047

Answers (1)

Saeed
Saeed

Reputation: 5488

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>

Upvotes: 1

Related Questions