Develop Reference

jQuery(document).on("keydown",...) works, but not document.addEventListener("keydown",...)

I thought I should see how much I really need jQuery now. So I started by replacing
jQuery(document).on("keydown.", function(e){...})
with
document.addEventListener("keydown", function(e){...})
I believed that one was easy, but to my surprise the event was no longer fired. To investigate this a bit I entered the second version in the console. Now it worked. ;-)
That is a bit impractical, of course. I would prefer that I did not have to enter it in the console...
In the code the event listener is added right after some changes to the DOM, i e some additions. I guess the trouble might be related to this, but I have no idea what to do.
Any suggestions?
EDIT: Thanks everyone for the comments. In this particular case it would be good to get rid of jQuery (but otherwise it is no problem using jQuery of course).
I should have said that some DOM elements are added long after the page is loaded so window.onload etc is not useful here.
I should maybe also have said that I am testing this in the latest version of Chrome and for this I am not interested in backward compatibility (it is too complicated anyway in this case so I have just dropped that... ;-) ).
UPDATE: Someone asked for code. Here is an example I just tested:
document.addEventListener("keydown.test", function(e){
console.log("doc.addEL test keydown, e=", e)
});
Looking in Chrome Dev Tools at the properties of the HTML element I can see the event listener there (with the code above). It is just not fired. Seems like it is just time to write yet another bug report then. ;-)

My bad. I misread the news that event handlers now can be removed using standard syntax. They can, but the syntax is that you give the event+handler function to removeEventListener.
The syntax I used above for the event, "keydown.test", is not a valid syntax (if you are not using jQuery).
Sorry for wasting your time. Hope someone can use the answer.

jQuery is adding a strange attribute to html elements

In internet explorer 8, emit strange jquery attributes that sometimes can cause problem and when I need to select them, the selector won't work.
I don't know if this is related to my rendering problem, but I've never noticed it before, in IE8 or any other browser. Can someone explain what these attributes are?
sizzle-1377765392290 ="[object Object]"
also it creates unique id for each element
i.e: jQuery110201441698622493836
https://www.dropbox.com/s/e5l0r9weht23mhn/Ie8.PNG
Thanks You

See the answer here, jQuery uses it to attach event handlers etc in IE.: https://stackoverflow.com/a/16341470/1371408

As i can see in this bugs.jquery.com/ticket/8539 that sizzle cache bug was fixed in 1.7 version of jquery .
And as per your comment you included older version of jquery 1.1.0 so updating it to latest release of jquery will solve your issue .

You can remove this by,
var re = /\s*(sizset|sizcache)\d*="[^"]*"/gi;
source = source.replace(re,'');
http://jsfiddle.net/mblase75/fMdVc/
Alternatively, jQuery has a .removeAttr() method, but you'll have to apply it to specific tags:
jQobj.removeAttr('sizset').removeAttr('sizcache');
Have a look

Opening all links with class popup in a new window

I have lots of links on my page with class="popup".
I want all of these to open in a new window.
Any nice way to define this with JavaScript?

I am using .live() to support links that might be added later to the DOM. If you are not adding links from event handlers, Ajax callbacks, etc., you can simply use .click().
$('a.popup').live('click', function (e) {
window.open(this.href);
e.preventDefault();
});
Please note, that according to the current HTML5 spec, you can also use:
as you previously could in HTML4. This way, you do not need Javascript. Using target is not recommended though on an XHTML doctype, because it is not considered a valid attribute.
UPDATE: From the jQuery documentation
As of jQuery 1.7, the .live() method is deprecated. Use .on() to
attach event handlers. Users of older versions of jQuery should use
.delegate() in preference to .live().
If you need help changing your code, be sure to check previous StackOverflow questions. Using the SO search [jquery] live deprecated is a good start.

You can put this in your $(document).ready()
$('a.popup').attr('TARGET', '_BLANK');

Setting an attribute named "required" and any value, with JQuery, doesn't work

This doesn't work:
$("#elementId").attr("required", "true");
In both Chrome and Firefox, the DOM produces either required as the attribute (no value) or required="" (empty value).
And it doesn't matter that the value in this example is "true". If you try "asdf" the same thing happens.
What's odd is that I believe this used to work because this new code is part of a large project that's been ongoing for several years.
The only thing I can think of is that my Chrome (v10) and Firefox (v4) are now both sufficiently advanced that they're recognizing the required attribute as an HTML5 reserved keyword. I added the novalidate attribute, thinking that that might turn off any form-related HTML5-ness. No such luck.
Thoughts?
Edit:
To clarify, this only happens with JQuery. If I say this, it works:
$("#elementId")[0].setAttribute("required", "true");
Is there a bug in JQuery? Any idea why this only happens with JQuery? Our development team likes all code to go through JQuery where possible. I can use the straight setAttribute JavaScript method, but would rather use a JQuery solution that works.
Edit 2:
The crux of the matter is this...
Why does using JQuery's attr() method not work when the regular setAttribute() method does? Doesn't the attr() method call setAttribute() at some point lower down?
That is what is so confusing. Chrome and Firefox are perfectly fine setting required="true" if you use setAttribute().

You can use prop to achieve this:
$("#elementId").prop("required", true);
Corresponding documentation: http://jquery.com/upgrade-guide/1.9/#attr-versus-prop-

It is indeed browser related. I checked in IE8 and it will apply whatever string value you set to the required attribute.
Since you don't need any value (only the attribute must be present), this won't affect default behavior. If you are abusing the attribute value for javascript hooks, that's another thing :)
<input required> is the same as <input required=""> and <input required="honky-tonk">
Since IE8 doesn't support html5, it's just like setting a made-up attribute, so you could set $("input").attr("derp", "derty") and it would assign it to the element.
My guess is that jquery uses the required="" for folks who wish to use this in XHTML strict syntax, while still conforming to HTML5 standards.
http://dev.w3.org/html5/spec/Overview.html#the-required-attribute
http://dev.w3.org/html5/spec/Overview.html#boolean-attribute

The way I got this working was to implement the following good old javascript in place of any jQuery:
document.getElementById("inputid").required = true;
or, (obviously)
document.getElementById("inputid").required = false;
depending on requirements.
The source of my solution is here.
I have read through .attr() and .prop() pages on the jQuery API, and there seems to be no support for the "required" attribute - but I am open to correction.

I use this fairly often and I haven't noticed any problems with it.
$("#elementId").attr("required", "required");
Note: I have try this but I could NOT get it working:
$("#elementId").attr("required");
Even though required is now a boolean attribute, simply adding the attribute name (without the value) does not appear to be too compatible with different versions of different browsers. Stick with my original example above and you should be fine.

For input required, it works much better if you remove the attribute vs. setting it to false
$('#elementId').removeAttr('required');

How to trigger event on dynamically generated elements (in mootools)

Example to demonstrate the issue can be found here:
http://jsfiddle.net/Byyu2/
As you can see only the first "Add" button triggers an event. The dynamically generated button does not. This is understandable as on page load these elements have not been created.
So what do I need to change to enable dynamically generated elements to also be registered to an event?
Thanks for looking.

The answer mentioned is quite old. If you can, upgrade to MooTools 1.3 instead of 1.2. In MooTools More, you will find the Element.Delegation package. The package handles delegation for all MooTools native events, except focus, blur, mouseenter and mouseleave.
You will find an updated JS Fiddle here: http://jsfiddle.net/Byyu2/1/

An answer on implementing .live (from jQuery) in mootools may be of some use.

What about using Element.cloneEvents?
Check this sample:
http://jsfiddle.net/Byyu2/5/
It looks kind of ugly, because you can't call cloneEvents() directly on the new row (cloneEvents() does not work recursivly), but it works :-)