one listener for all child elements in the DOM tree

Question

How to have only one keypress event so it can be triggered by any child element in the DOM tree.

For example I have something like this:

<table>
<tr>
  <td><input type="text" id="col_1" value="1"/></td>
</tr>
<tr>
  <td><input type="text" id="col_2" value="2"/></td>
</tr>
<tr>
  <td><input type="text" id="col_3" value="3"/></td>
</tr>
</table>

So for example when user changes the value on id=col_3 and then on id=col_2 how can I distinguish which input triggered this event? I need to be able to save and input id and the value of it in an array so I can read it later on.

how are you registering the event handler using jQuery or dom methods — Arun P Johny
– Arun P Johny, Commented Aug 8, 2013 at 7:18

Moazzam Khan · Accepted Answer · 2013-08-08 08:54:45Z

2

You can try using jQuery .on method,

$("table").on("keypress", "input", function(event){
  alert($(this).attr("id"));// gets the input id
  alert($(this).val());// gets the input value
});

This code will take care of all the inputs inside the <table> tag.

If you want not to execute this listener on every keystroke, giving sometime(3 sec) to breath, try this code -

var timeoutReference;

$("table").on("keypress", "input", function(event){
    var el = this; // copy of this object for further usage

    if (timeoutReference) clearTimeout(timeoutReference);
    timeoutReference = setTimeout(function() {
        doneTyping.call(el);
    }, 3000);
});

$("table").on("blur", "input", function(event){
    doneTyping.call(this);
});

function doneTyping(){
    var el = this;
    // we only want to execute if a timer is pending
    if (!timeoutReference){
        return;
    }
    // reset the timeout then continue on with the code
    timeoutReference = null;

    //
    // Code to execute here
    //
    alert('This was executed when the user is done typing.');
    alert($(el).attr("id"));//id
    alert($(el).val());//value
}

edited Aug 8, 2013 at 8:54

answered Aug 8, 2013 at 7:20

Moazzam Khan

3,1702 gold badges23 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user123_456 Over a year ago

how would you combine it with this answer: stackoverflow.com/questions/14042193/…

Moazzam Khan Over a year ago

I can set a timer for it, it depends on, how long you want to wait before you are sure that user has stopped typing, 2 or 3 secs

user123_456 Over a year ago

One more question :) is there any way to send this id and value to the doneTyping() ?

Collectives™ on Stack Overflow

one listener for all child elements in the DOM tree

1 Answer 1

3 Comments

Your Answer

Linked

Collectives™ on Stack Overflow

one listener for all child elements in the DOM tree

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related