$(“id”).trigger(“click”) not calling :active selector associated with that element

Question

So I have a button with id="one" and I have set the :active selector of that button

#one{
  background:#00cc00;
}
#one:active{
  background:#00ff00;
}

Now I am triggering the above button using some other button but it does not trigger the :active selector

 $("#startBtn").on("click", function() {

    $("#one").trigger("click");

  });

What do I have to do for triggering :active selector? I have already bind the click event for a class which contains the button

 $(".squares").on("click", function() {

    var id = $(this).attr("id");
    new Audio(audio[mainIndex[id]]).play();

  });

So the audio plays with the .trigger event but the :Active selector doe not tigger.

Answer 1

jQuery events do not trigger CSS pseudo-selectors (focus, hover etc).

If you want to change the color of the other button, you will need to either set the style, or add a class with the style you want:

#one{
  background:#00cc00;
}
#one.active{
  background:#00ff00;
}

$("#startBtn").on("click", function() {
    $("#one").addClass("active");
    $("#one").trigger("click");
});

Answer 2

You need to bind an Event before you trigger the same. Like this:

 $("#one").on("click", function() {
     alert("Button click triggered");
 });
 $("#startBtn").on("click", function() {
     $("#one").trigger("click");
 });

Answer 3

:active is an interaction state. I would try this using :focus

 $("#startBtn").on("click", function() { $("#one").trigger('focus'); }); 

 #one{ background:#00cc00; } #one:focus{ background:#00ff00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input type="button" id="startBtn" value="startBtn"> <input type="button" id="one" value="one"> 

Answer 4

Try this

 $("#one").on("click", function() { console.log("Clicked One"); }); $('#startBtn').mousedown(function() { $("#one").addClass('active').trigger("click"); }).mouseup(function() { $("#one").removeClass('active'); }); 

 #one { background: red; } #one:active { background: #00ff00; } .active { background: #00ff00 !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="startBtn">start</button> <button id="one">one</button>