Develop Reference

Jquery .on() native function in javascript

I have created widget which is using jquery latest version 1.11.1.
When i adding my widget into 3rd party website.
And 3rd party website have lower version jquery e.g. 1.5 in my case (it could be any version). 3rd party website jquery don't have the latest function.
e.g
Latest version function
jQuery(document).on("click", function(e) {
...
});
So i am getting error function is undefined. How to resolve this type of issue.
Or did i have created the widgets wrong way that depend on jquery?
If anyone know how to implement java script widget that don't depend on 3rd party library like jquery different version.

If you are using event delegation, only then this answer applies
In jQuery 1.5, you have the .delegate() method, you can use that
$( "table" ).delegate( "td", "click", function() {
$( this ).toggleClass( "chosen" );
});
Don't use .live() as it is removed in verions >= 1.9

The on method is not known in version 1.5
You should use this syntax instead:
jQuery(document).click(function(e) {
...
});

jQuery(document).click(function(e) { here as there is no delegation
And for dynamic HTML use live event as it works in old jquery version and you Must use deprecated syntax as its using old jQuery.
if you have to deal with dynamically data use live()

Jquery .on() is added in version 1.6+. for previous versions you need to use .live()
As you are not delegating the event, you can simply use .click() to attach the click event:
jQuery(document).click(function(e) {
...
});

I don't think there is any direct/dynamic way to resolve your problem.
Even if you resolve the problem with 'click' function. You may face problem with another function which is either not supported in lower version of JQuery or have different syntax/behavior.
e.g. few animations like 'fadeOut(1000)' may not be supported in lower version of JQuery(this is just example. You need to check whether these kind of APIs are supported or not.)
So practically you might have to just do trail and error. Test your JQuery widget/plugin with all available JQuery versions.
You could figure out the Jquery version of the WebSite where you are deploying your widget. See if this is helpful to get the version. https://api.jquery.com/jquery-2/
Depending on version you could use appropriate supported API e.g., live() for v1.5 and below AND .click() for higher versions.
You are good to go when everything works.

typeahead.js iOS Safari vs Standalone Web App Differences

I understand that typeahead.js does not support mobile yet.
Even though it works in mobile browsers (mobile Safari), does anyone have an idea as to why it might not work once the form is viewed through a 'standalone' version of the web page?
The problem that is occurring is that when I try to 'click/touch' the suggestion dropdown, it does not fill the input with that entry in the standalone version, where as the safari version does work.
Is this type of behavior documented anywhere or known for iOS?
Thanks.
Addition: I added a jquery delegated click listener to .tt-suggestion to show an alert, which works in mobile safari, but not in the standalone version (I think the delegation event is not attaching).
$(document).on('click', '.tt-suggestion', function(e) {
alert('clicked');
});

I realized I was also using the FastClick library, which messes up the delay between dropdowns and the selected option.
To work around it, bind a dom mutation listener and add the needsclick class to each <p> class under each <div class="tt-suggestion">:
$('.tt-dropdown-menu').bind('DOMNodeInserted', function(e) {
$(e.target).find('.tt-suggestion').children('p').addClass('needsclick');
});
You might also be able to try using a listener:
$('input.typeahead').change(function(e) {
$(this).closest('.tt-dropdown-menu').find('.tt-suggestion').children('p').addClass('needsclick');
});
Or using an event delegator:
$('.tt-dropdown-menu').click(function(e) {
$(e.target).children('p').addClass('needsclick');
});
Note: functions are untested, they are based off memory.

jQuery 1.3.2 -using .click()

I am using a program that requires jQuery 1.3.2 and haven't been able to get the .click() function to work, but I am able to get function like .hover() to work.
This works fine:
$(document).ready(function() {
$("#alert_button").hover(function(){
alert("The monitor has been notified - please wait in your room and they will be by shortly");
});
});
But this does not:
$(document).ready(function() {
$("#alert_button").click(function(){
alert("The monitor has been notified - please wait in your room and they will be by shortly");
});
});
Did 1.3.2 not support .click()? And if not was there an alternative event handler to use?

.click() will work in any case... demo
Rather, .hover() will not work in Chrome for action elements like <button> demo
If you're fine with the above mentioned than your error lies somewhere else,
open Firebug or any Developer console and see if you have some other JS errors.

working fine, your code may be facing some conflicts. Kindly check your browser console for errors.

Update your jQuery to 2.03 and change .click to .on('click', function...
Your version is very old, and have many deprecated code.

jQuery/Mootools issue in IE8

I'm working on a page that has both Mootools 1.4 and jQuery 1.5.1 running. I know this isn't ideal but I don't really have an option. The page works fine in most every browser, but not in IE8. I get the following error:
Object doesn't support this property or method
when attempting to add a click event, despite putting my jQuery-specific code in a noConflict block. Here's a fiddle that reproduces the issue: http://jsfiddle.net/p7rFV/1/
Thanks for any ideas on what's going on.
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
document.getElementById('button').addEvent('click', function(){
document.getElementById('tester').hide();
});

Two issues with your fiddle:
When you do, you should use jQuery.noConflict();, not $.noConflict();
MooTools can't enhance DOM elements at the prototype level in IE like it can in other browsers, so you have to always be sure to pass them through $() or document.id() before using MooTools-specific functions on them. So this line fails:
document.getElementById('tester').hide();
...because the DOM element has no hide method. Instead, just use $() or document.id():
$('tester').hide();
document.id('tester').hide();
...which will both look up the element and extend it.
Updated fiddle

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');