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.
Related
I am not a JS developer, I am just a Web Designer dealing with simple JS interaction most of the time.
I am using jquery-1.11.3 and jquery.mobile v1.4.5 with just core features and slider capability.
As tablet I have a kindle with the firefox (beta) browser and an ipod with safari browser.
I am having a problem in understanding some JS behaviours of tablets and browsers regarding the click event function and document ready
$(function(){
$('.menu-ham').click(function(){
alert("test")
});
});
the click event doesn't work on tablets but it works perfectly on web browsers.
Instead if use this outside the document ready
$(document).on('click', '.menu-ham', function(){
alert("test")
})
it works like a charm. Only that I am not sure if this it would create problem with the browser because not inside document.ready
I tried to use as well
$(function(){
$('.menu-ham').on('click', function(){
alert("test")
});
});
inside or outside the document ready and nothing works.
"menu-ham" it is a button with that class. I read about a lot of topics, who said to use cursor:pointer, who said to use ".on('click'" instead of the normal click event, or vclick, or bind or touchstart but none really worked a part the solution that I offered, and now I am very confused about the whole thing on why is working and the other are not when I read a lot of comments that the other solution should work.
Any help would be very much appreciated, thank you!
I found the problem! it was all fault of Phalcon debugbar. On the mobile devices was generating an error that it wasn't happening on the normal browser. This error was making any jquery or selectors working.
Thank you for your help and support!
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.
$('.enter').live('click', function (e) {
e.preventDefault();
});
for some reason this does not get called on the specified button, BUT, when f12 is pressed and developer tools pops up this works!? I am using live on all other elements and it works fine... very strange and hard to debug. any help much appreciated!
If you are using jQuery 1.7+, it may be better that you use .on().
For example :
$(document).on('.enter', 'click', function(){
...
});
As jquery doc said .live() is deprecated http://api.jquery.com/live/
I had some issue by using .live() on IE if the element is created after define the event.
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
I'm just trying to understand a difference between IE, Chrome and Firefox. I have the following code on a page:
$('object').live('click', function(){
alert('Fired');
});
I then populate the page with some Flash controls (in my case, I'm using Uploadify). When I click on the Flash control, I see the alert in Firefox 4. However, I do not see the alert in IE8 or Chrome (I havent tested any other browsers).
Is there something obvious I'm missing?
Many thanks.
Could we see more code? This seems like it should work, so I can see why you're puzzled. Could be a syntactical error in your markup. Maybe try something like this, unless you have a specific reason for the live().
$('object').click(function() {
alert('Fired!');
});