jquery script adding id and using it doesn't work

Question

i am trying to use my keyboard to click on a button using the id.

For some buttons i had to set the ID, which actually works. But as soon as i try to use the keyboard for the buttons where i set the id, it won't work.

I am not getting any errors and since adding the id to the element works, i am kinda confused why i cannot use the new set id later in the code.

//setting id for first button (works)
$( "a:contains('Im Verband freigeben')" ).attr('id', 'freigabe-verband');
//setting id for second button (works aswell)
$( "a:contains('Vorheriger Einsatz')" ).attr('id', 'vorheriger-einsatz');


$( document ).keydown(function(e) {
 if (e.keyCode == 39) {
    //works, id is available, not set by me
     $("#alert_next").click();

} else if (e.keyCode == 38){
    // doesn't work, but id is set
    $("#freigabe-verband").click();

} else if (e.keyCode == 40){
    // doesn't work, but id is set
    $("#vorheriger-einsatz").click();

} 
return e.returnValue;

});

Anyone know why? https://i.stack.imgur.com/nQtRc.png

The DOM doesn't know that you have given that object an `id`, you need to delegate the event. — Sterling Archer, Dec 16 '15 at 15:27
This works fine for me: https://jsfiddle.net/es8oxgjc/ . But I'm executing the jQuery onload in that fiddle. Can you wrap it in a document.ready and see if it works for you then? — andi, Dec 16 '15 at 15:38
If you are trying to simulate a anchor click see this link. http://stackoverflow.com/questions/773639/how-can-i-simulate-an-anchor-click-via-jquery#answer-773738 — Sean Wessell, Dec 16 '15 at 15:40
your code does work for any other handlers that are bound. https://jsfiddle.net/SeanWessell/s2p4wd48/ — Sean Wessell, Dec 16 '15 at 15:41
Well yeah, that makes sense. Not sure how to delegate it, gotta look it up. — lost.design, Dec 16 '15 at 15:46

BenG · Accepted Answer · 2015-12-16T15:52:20.420

3

To click a dom element, use:-

$('#freigabe-verband')[0].click();

or

$('#freigabe-verband').get(0).click();

Example

$("a").attr('id', 'test');

$(document).keydown(function(e) {
 $('#test')[0].click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="http://stackoverflow.com">link</a>

edited Dec 16 '15 at 15:52

answered Dec 16 '15 at 15:45

BenG

14,826
5
45
60

The [0] was missing and fixed my code - i haven't changed anything else. – lost.design Dec 16 '15 at 16:48

score 1 · Answer 2 · answered Dec 16 '15 at 15:51

It doesn't make sense. I copy your code and create a plunkr, it works well. http://plnkr.co/edit/Eb5QF6mB97Js41NFbr8J?p=preview

// Code goes here
$(function() {
  //setting id for first button (works)
  $( "a:contains('Im Verband freigeben')" ).attr('id', 'freigabe-verband');
  //setting id for second button (works aswell)
  $( "a:contains('Vorheriger Einsatz')" ).attr('id', 'vorheriger-einsatz');
  
  $( document ).keydown(function(e) {
   if (e.keyCode == 39) {
    //works, id is available, not set by me
     $("#alert_next").click();
  
  } else if (e.keyCode == 38){
    // arrow up
    $("#freigabe-verband").click();
  
  } else if (e.keyCode == 40){
    // arrow down
    $("#vorheriger-einsatz").click();
  
  } 
  return e.returnValue;
  
  });  
}
);

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.1.4" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <a href="#" onclick="alert('a');">Im Verband freigeben</a><br>
    <a href="#" onclick="alert('b');">Vorheriger Einsatz</a>
  </body>

</html>

score 0 · Answer 3 · answered Dec 16 '15 at 15:28

0

Try this example:

$(document).find("#vorheriger-einsatz").click();

You're adding to the DOM after the fact so unless you search the dom again it won't be found

answered Dec 16 '15 at 15:28

StudioTime

22,603
38
120
207

jquery script adding id and using it doesn't work

3 Answers3

Linked