-3

My parent div contains a hidden form element (input):

$(document).ready(function () {

    $('.parent').on('click', function (event) {
        $(this).toggleClass('active');
  $(this).find('.child').trigger('click');
    });


    $('.child').on('click', function (event) {
      var theMsg = event.altKey ? 'true' : 'false';
       $('.parent span').html(theMsg);
    });

});
.parent {
    width:100px;
    height: 100px;
    background: #eee;
}
.child {
    display:none;
}
.active {
    background: red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
    ALT: <span> </span>
    <input class='child'>
</div>

When my parent click handler is invoked, I pay attention to whether ALT key is pressed. I'm trying to trigger('click') for the hidden input element, and pass the altKey status along. Nothing I've tried makes that happen. What am I missing?

user1307065
  • 147
  • 1
  • 1
  • 6

2 Answers2

0

You have sytax error for on click event. You have extra ) after click. it should be:

$('.parent').on('click',function(event) {
 var theChild=$(this).find('.child');
 theChild.trigger('click');
});
Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125
0

I am not sure which browser or os platform you are using. my code tested with ubuntu chromium.

In chromium browser Alt key used for selecting menu options.

for your reference :

event.altKey not working in chrome and IE

so , you can go with Clt key or Shift key .

You can check this alse

jQuery: How to catch keydown + mouse click event?

    $(document).ready(function() {

  $(".parent").on('click', function(e) {
    console.log(e.altKey, e.ctrlKey, e.shiftKey);
    var theChild = $(this).find('.child');
    theChild.trigger('click');
  });

  $(".child").on('click', function(e) {
    e.stopPropagation();
    console.log('child');
  });

});

Please let me know if there is any issue.

Community
  • 1
  • 1
Kesavan R
  • 649
  • 1
  • 5
  • 23