I have a problem with this jquery selector in Firefox but in Chrome works OK. I'm attaching this event handler after an ajax call. I also tried with live() insted of on() but the same happened... it worked fine in Chrome but not in Firefox.
The firefox version is 24.0.
Here is my code:
$("#paginationlinks > li > a").on("click",function(){
alert("hello world");});
Firefox requires clicks to have an argument for what is getting clicked on if you want to reference it later (like you would with .preventDefault):
$("#paginationlinks > li > a").on("click",function(event){
event.preventDefault;
alert("hello world");
});
Notice the event in function(event)
Fiddle working in Firefox: http://jsfiddle.net/hCE6h/
Fiddle not working in Firefox: http://jsfiddle.net/hCE6h/1/
Chrome doesn't care either way.
You might try this by using children() selector and use of on()'s second parameter to specify a selector (rather than using > to specify direct descendants):
$("#paginationlinks").children("li").on("click", "a", function(){
alert("hello world");
});
http://api.jquery.com/on/
Related
I am very new to this. Can someone help point me in the right direction?
I've got my website mostly working the way I want in Firefox, but now that I try test it in Safari or Chrome, it doesn't work. I'm sure there will be many more problems later, but the first issue is that I am dealing with is my main nav buttons are not working. The click handlers and mouseleave and mouseenter are not working.
Is there something wrong with this code or could it be a problem somewhere else?
function onLoad () {
var $list= $('#mainNavList');
showMainMenu(); //make menus appear
specifyScrollingElement('#mainNavList');
specifyScrollingElement('#lowerNav');
$list.find('.linkInactive').live('click', onMainNavMenuClick);
$('.albumLink').parent().bind('mouseenter',function(){
$(this).css({'background-color': '#fff'});
});
$('.albumLink').parent().bind('mouseleave',function(){
if ($(this).hasClass('current')==false){
$(this).css({'background-color': 'rgba(233,229,194,.9)'});
};
});
$('.textLink').parent().bind('mouseenter',function(){
$(this).css({'background-color': 'rgba(65,65,65,.8)'});
});
$('.textLink').parent().bind('mouseleave',function(){
if (portfoliosActive ==false && $(this).children().hasClass('portfolioButton')==true ){
$(this).css({'background-color': 'transparent'});
};
if (portfoliosActive ==true && $(this).children().hasClass('homeButton')==true){
$(this).css({'background-color': 'transparent'});
};
});
$list.find('.linkActive').live('click',function(){
var $this = $(this);
$this.addClass('linkInactive').removeClass('linkActive');
hideThumbs($list);
});
thumbnailActions('#mainNavList');
thumbnailActions('#lowerNav');
initUpperNavActions();
}
Use 'on' instead of 'bind' and 'live'... that should save you a world of pain later.
Those methods are deprecated as of jquery 1.7..
See the follow link for more info: http://api.jquery.com/bind/
As of jQuery 1.7, the .on() method is the preferred method for attaching
event handlers to a document. For earlier versions, the .bind() method is
used for attaching an event handler directly to elements. Handlers are
attached to the currently selected elements in the jQuery object, so those
elements must exist at the point the call to .bind() occurs. For more flexible
event binding, see the discussion of event delegation in .on() or .delegate().
and also: http://api.jquery.com/live/
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().
And example of using 'on' for your code would be:
$('.albumLink').parent().on('mouseenter',function(){
$(this).css({'background-color': '#fff'});
});
You should use .on() it binds and persists. I use it in chrome with no issues.
$(".albumLink").on('click', function () {
$(this).css({'background-color': 'rgba(65,65,65,.8)'});
});
http://api.jquery.com/on/
if you are using an older jQuery you might have to use delegate()
http://api.jquery.com/delegate/
** NOTE: delegate switches the parameter order. In later Jquery (1.7) .delegate() is just an alias for .on() anyway
hth
I wasn't able to get on or delegate to work. I think I am still confused about how to use jquery.
But I figured out what the problem was with my click and mouseenter and mouseleave not working. I discovered an extra "</div>" in the code so I think there was an invisible div blocking my nav buttons. After I deleted it, the buttons all suddenly work in Safari and Chrome! Thanks for your time!
I am new to jQuery and am having a few issues. This jsFiddle shows what I am experiencing: http://jsfiddle.net/rE2FH/5/ Note how the button does nothing.
What I am trying to do is set a click listener to the button and have it do an alert();. However, the neither the click event or the alert() is working.
I have tried the click event as .click(), .on(), .delegate(), and .live() none of which seem to work. As for the alert, I cannot find anything other than the equivalent to "It automagically works if you do 'alert([sting]);'!" I am aware the .click() is for 1.7+, .live() is depreciated and even then .delegate() is preferred over it.
In my current project I am using jsp with the script
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> HOWEVER, it does not work in the jsFiddle either. This version works fine on some of our other pages (alert and .click events), but for some reason the one I'm currently working on has issues. I have done everything I can see to emulate those other pages as well, but I may be missing something. The guy who wrote that jQuery is no longer with our company.
I have already searched SO, and none of these results have worked for me:
jQuery .click() not functioning
jQuery .click() problem
jquery button not respond to click method
jquery click event issues
+others that are all along the same lines.
Any insight would be appreciated.
You had several issues. Make sure you check the javascript console for errors. Here's a working version:
http://jsfiddle.net/LxuVy/
$(document).ready(function(){
$(document).delegate('#but', 'click', buttonClick);
function buttonClick() {
$('#res').hide().html("BUTTON!!!").fadeIn('fast');
alert("Hello!");
}
});
To break down the issues with yours:
$(document).ready(function(){
$.delegate('#but', 'click', buttonClick());
function buttonClick(){
$('#res').hide().html("BUTTON!!!").fadeIn('fast');
alert("Hello!");
}; // this semi-colon shouldn't be here
}; // missing closing paren for ready()
delegate is used like this:
$('selector').delegate(...)
Though delegate() has been replaced by on(), which should be used instead.
Also, buttonClick() should be buttonClick. When you add the parentheses, you are executing the function. What you want to do in this case is pass the function as a parameter.
You are missing the closing ) from the document.ready:
$(document).ready(function(){
$.delegate('#but', 'click', buttonClick());
function buttonClick(){
$('#res').hide().html("BUTTON!!!").fadeIn('fast');
alert("Hello!");
};
});
I would also suggest using .on() like this: http://jsfiddle.net/rE2FH/23/
Multiple probleme.
First you need to select an element with delegated (closest static parent)
$(document).delegate(...)
The function in the parameter should not finish with braket
$(document).delegate('#but', 'click', buttonClick);
And you are missing a closing parenthesis.
Fiddle : http://jsfiddle.net/rE2FH/18/
But since your button is static, you can use click directly :
$('#but').click(buttonClick);
Also, delegated is deprecated, you should use .on().
I see three problems:
.delegate is also deprecated, you should be using .on. You are also calling it wrong, directly on $. Finally, you're not actually delegating the event to any ancestor, so you could very well be using .click directly.
Instead of passing a function reference when binding the event, you're calling the function (you're passing buttonClick() instead of buttonClick).
You forgot to close a parentheses at the end, causing a syntax error (always check you browser's console, it will show this kind of error).
Fixing all that, your code would be:
$(document).ready(function(){
// using .click instead of .delegate
// .on('click', buttonClick) would work too
$('#but').click( buttonClick );
// no calling parentheses -^
function buttonClick(){
$('#res').hide().html("BUTTON!!!").fadeIn('fast');
alert("Hello!");
}
});
// added missing ) at the end
I am using below code to bind a custom event to an element.
jQueryelement.bind("custom",{}, function(){});
and i am trying to trigger this with
jQueryelement.trigger("custom");
This is working fine in Firefox. But causing unknown runtime error in IE. Please help me in this. TIA
I'm using jQuery v1.5.2
Using bind() and trigger() in jQuery 1.5.2 seems to work fine. My guess is there is some other code in your app which is causing this.
DEMO - works in FF, Chrome, IE9, IE8/IE7 combatibility mode and IE quirks mode
Demo uses this code:
$('body').bind('custom', {}, function(){
alert("Well, Hello!")
});
$('body').trigger('custom');
For completeness as of JQuery 1.7 (I know this question relates to JQuery 1.5.2) you are better to use on(). If you are using it as an event for the whole page use something like:
$(document).on("custom", function() {
alert("Triggered!");
});
$.event.trigger("custom");
or if you are triggering on an element:
$(".myElement").on("custom", function() {
alert("Triggered!");
});
$(".myElement").trigger("custom");
The following code in IE7 or IE8 doesn't work. Is this a bug? It works fine in IE6 (Incredible!)
http://jsfiddle.net/zgSmT/
Try using the live event, or binding the event after document load:
$('#clickme').live('click', function(){
alert('hey');
});
Also, you're still loading scripts.js, which doesn't exist, in your fiddle example - that might also cause a problem.
You might try
$().ready(function ()
{
$('#clickme').live('click', function(){
alert('hey');
});
}
To ensure everything is loaded.
I have the following code which work fine:
$('.ui-selectmenu-menu a').click(function() { alert('OK'); });
However, if I replace it with:
$('.ui-selectmenu-menu a').live('click', function() { alert('OK'); });
it does not work.
What could be the reason for that ?
(In my case, $('.ui-selectmenu-menu a') elements could be removed and added again during the run.)
If the class changes e.g. the parent doesn't have class="ui-selectmenu-menu then the selector would no longer match, make sure this isn't happening after whatever events you have.
Unlike binding directly to the element, the selector no longer matching will stop a .live() handler from firing for that element's events.
Nick's answer makes sense. But also, check that you have jquery version 1.3 or greater.
.live() was added in jquery version 1.3.