2

Hello guys im building a library, for example i give an atribute to a html element

<a href="https://google.com" shc="27">
logout

like this one shc="27" which means when the key 27 (ESC) will be clicked on keyboard it will trigger a click on the link but for some reason it denies to click it. here is my full code:

$(document).on("keydown", function(e) {
    console.log(e.which);
    checkElementType(e.which);
});

function checkElementType(shortcutKey){
    var element = $("[shc="+shortcutKey+"]");
    var elementType = element.prop('nodeName');

    switch(elementType){
        case 'A':

            console.log(element);
            console.log('click the link');
            element.trigger('click');
        break;
    }
}

here is the fiddle : Fiddle

Jazz
  • 23
  • 3
  • 1
    Not related to your problem but you should be using [`data-*`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*) attributes instead of a custom attribute. – Andreas Jan 16 '16 at 20:17
  • Possible duplicate of [Jquery how to trigger click event on href element](http://stackoverflow.com/questions/7999806/jquery-how-to-trigger-click-event-on-href-element) – Andreas Jan 16 '16 at 20:20
  • @Andreas why use data-attribute instead of custom attribute ? – Jazz Jan 16 '16 at 20:53
  • Because your custom attribute isn't defined in the specification which can have undesirable side effects (now or later). These `data-*` attributes have been specified exactly for this purpose. To have a place to store data and still generate valid HTML5 markup – Andreas Jan 16 '16 at 21:03
  • Okay thank your for your explanation i thought about using data-shc but than i was lazy to type every time data- , thats why i got rid of it, but ill make sure ill use it now :) – Jazz Jan 16 '16 at 21:08

3 Answers3

1

change element.trigger('click'); to element[0].click()

Henry Arneson
  • 71
  • 6
0

I don't even know what I changed but it works

<html>
<body>
<a href="http://google.com" class="shortcut" shc="27">
    logout
  </a>
</body>
</html>

$(document).on("keydown", function(e) {
    console.log(e.which);
    checkElementType(e.which);
});

function checkElementType(shortcutKey){
    var element = $("[shc="+shortcutKey+"]");
    var elementType = element.prop('nodeName');

    switch(elementType){
        case 'A':
            element.trigger('click');
            console.log(element);
            console.log('click the link');
        break;
    }
}

https://jsfiddle.net/s8fk88ou/3/

Florian Humblot
  • 1,121
  • 11
  • 29
0

You can use window.location.href attribute to open the link based on href attribute of element:

window.location.href = element.attr('href');

Hope this helps.

$(document).on("keydown", function(e) {
  console.log(e.which);
  checkElementType(e.which);
 });

 function checkElementType(shortcutKey){
  var element = $("[shc="+shortcutKey+"]");
  var elementType = element.prop('nodeName');

  switch(elementType){
   case 'A':
    console.log(element);
    console.log('click the link');
                
                window.location.href = element.attr('href');
                //Or
                //element[0].click();
                //Or
                //element[0].trigger('click');
                
   break;
  }
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://google.com" class="shortcut" shc="27">logout</a>
Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101