How do I get active element class with Jquery if it's dynamic

Question

When I try to get the active element in javascript (document.activeElement.tagName), it keeps returning BODY. The input element was created with jquery.

Here's the situation: On page load, I created an input box via jquery. (standard class, dynamic id)

on a button click, I want to test if that input box is selected

Thanks for the help

something like this:: http://stackoverflow.com/questions/967096/using-jquery-to-test-if-an-input-has-focus — Sudhir Bastakoti, Jan 14 '13 at 03:34

score 4 · Accepted Answer · edited Jul 03 '13 at 11:51

4

document.activeElement returns the currently focused element. When there is no focused element, the active one is the page's body.

When you click button, the textbox no longer has the focus, so the body element is always returned.

See more at: https://developer.mozilla.org/en-US/docs/DOM/document.activeElement

edited Jul 03 '13 at 11:51

webprogrammer

792
15
26

answered Jan 14 '13 at 03:39

phnkha

7,782
2
24
31

score 0 · Answer 2 · answered Jan 14 '13 at 03:45

You'll have to keep track of the last selected item by monitoring which one was clicked on last.

The following script should accomplish what you're looking for.

jsFiddle

JS

$('body').append(
  //Dynamic Inputs being added
  $('<input />', { 'id':'test', 'type':'text'})
).append(
  //Dynamic Inputs being added
  $('<input />', { 'id':'test2', 'type':'text'})
).on('click', 'input[type="text"]', function(e){
  //Keep track of the last selected input
  $('.lastSelected').removeClass('lastSelected'); 
  $(this).addClass('lastSelected'); 
}); 

//Get the last selected input from the page on a button click
$('#mybutton').click(function(e){
  var items = $('.lastSelected')
  if(items.length > 0){
    alert($('.lastSelected').attr('id')); 
  }
});

HTML

<input id='mybutton' type='button' value='Click Me' />

How do I get active element class with Jquery if it's dynamic

2 Answers2

jsFiddle