Matching dynamically added events (as attributes) with jQuery

Question

How can I match all elements that have a specific attribute that is added at run time?

For example, the code:

$('[onkeydown]')

will successfully match:

<div onkeydown="foo();">

but won't match the following div:

<div id="mydiv">
// ....
<script type="text/javascript">
var element = document.getElementById('mydiv');
element.onkeydown = foo;
</script>

Note: the ID attribute is used as an example. I do not know the ID's attribute values of all the elements I want to match, so please provide a solution which matches all elements that have an attribute specified.

To clarify, in the second example, the following code correctly returns the function that is used:

$('#mydiv').attr('onkeydown') // == foo

Note: if I do the same thing above, but instead of using an event (onkeydown), I use a different attribute which isn't an event (e.g. title), it will successfully match the dynamically added attributes. Thus, it seems like it is only a problem with events.

Answer 1

[Working demo]

/**
* Returns all the elements with the specified attribute.
* @param base is optional (root element)
*/
function getElementsByAttr( attr, base ) {
  base = base || document;
  var all = base.getElementsByTagName('*'),
      len = all.length,
      res = [];
  for ( var i = 0; i < len; i++ )
    if ( all[i][attr] != null )
      res.push( all[i] )
  return res;
}

Please note that the function checks all elements in the DOM (if no root element is given) so it can become slow when used on heavy layouts.

Answer 2

jQuery will not match attributes added after-the-fact in such a way. You need to use jQuery .is() or .has():

           <div id="mydiv">hi</div>
           <script type="text/javascript">
           var element = document.getElementById('mydiv');
           element.onkeydown = foo;
           alert($('[onkeydown]').length); // 0
           alert($("div").is("[onkeydown]")); // true
           </script>

However, I have to ask why you are trying to change the onkeydown or hard code it like that instead of using $("#mydiv").keydown(function () {});

Also, why not use jQuery to get the data in the first place? Why document.getElementById()?

element = $("#mydiv"); //This uses document.getElementById() inherently -- no speed loss
element.attr('onkeydown', foo); // kind of wasteful .. use .keydown()