We Keep Coding

jQuery .bind('show') not working appropriately when element is shown via jQuery

I have a snippet in my project similar to the one seen below:
$('#field').change(function() {
var thisCondition = $(this).val();
if(thisCondition) {
$('#this_container').fadeIn();
}
});
The above snippet is working. When thisCondition evaluates to true, the container does fade in. However, I also have the snippet below that is not functioning as expected. It binds to show so that when the container fades in an event will be triggered:
$('#this_container').bind('show', function() {
$.ajax({
...
});
});
Shouldn't the snippet above react to line 5 in the change event handler? Why is the bind method not triggering?

Confirmed that show is not a valid nor jQuery-triggered event.
But you can trigger it yourself!
Try something like this :
$('#this_container').fadeIn("slow", function() {
$(this).trigger("show");
});

The show is not a valid event, neither is triggered by jQuery. You need to construct your script in a different way altogether:
$('#field').change(function() {
var thisCondition = $(this).val();
if(thisCondition) {
$.ajax({
success: function () {
$('#this_container').fadeIn();
}
});
}
});
So, you can try to bring the AJAX content, and upon a successful request, you can show the container.

try to use :
$('#this_container').fadeIn( "slow", function() {
// Animation complete
$.ajax({
...
});
});

jQuery - how to delegate a toggle

How can I provide a toggle for a dynamically created element?
My code does not work:
JS
$("body").on('toggle', ".buttonA", function(){
function() {
..do stuff
},
function() {
.. revert stuff
}
});

Try this:
$('body').on('click','.buttonA', function () {
var toggled = $(this).data('toggled');
$(this).data('toggled', !toggled);
if (!toggled) {
//..do stuff
}
else {
//.. revert stuff
}});

If you are using jQuery,you can use .live() methods for binding a dynamically created element.
$('#hello').live("click", function() {
alert( "Goodbye!" ); // jQuery 1.3+
});
I didn't use jQuery for a long time.So I don't know the method is valid or not.But it is very easy to write a new method to resolve this requirement.The more important thing is you bind the element whether or not.

Create a reusable javascript function

At the moment I'm using the below function to perform a simple slide...
function jeans(jean, links) {
$(links).hide();
$(jean).hover(
function() {
$(links).show('slow');
},
function() {
$(links).hide('slow');
});}
And calling it where required with...
jeans('#red-jeans', '#red-jeans ul');
jeans('#blue-jeans', '#blue-jeans ul');
jeans('#yellow-jeans', '#yellow-jeans ul');
I'd like to be able to perform this by just attaching a class on the parent "#red-jeans".
I'm tring something like
function jeans(selector) {
$(selector 'ul').hide();
$(selector).hover(
function() {
$(selector 'ul').show('slow');
},
function() {
$(selector 'ul').hide('slow');
});}
...but my syntax is atrocious!
If someone can point me in the right direction it would be very much appreciated!
The issue is now that the slide runs on every element I've got the class on. Can anyone recommend an amend that would only activate it on the current hover? I presume a (this) is needed somewhere...
Thanks!

This:
$(selector 'ul').hide();
should be
$('ul', selector).hide();
Along with all the other similar places. What this does is looks for ul elements within selector

There are several ways you could achieve this in a clean way:
$(selector).find('ul')
$(selector + ' ul')
$('ul', selector)
are all equivalent.
In general I recommend you cache the selectors if you use them more often, because calling $() with a selector inside might be quite expensive. This way you have better performance and less trouble when refactoring.
To make the slides dependent on your current hover, use $(this) instead of the general selector.
function(selector){
var $element = $('ul', selector);
$element.hide();
$(selector).hover(
function() {
$(this).find('ul').show('slow');
},
function() {
$(this).find('ul').hide('slow');
});
}

Already answered, but this is a nice way of doing the same thing. You can create your own jQuery plugin like this...
$.fn.jeans = function() {
$(this).find("ul").hide();
$(this).hover(
function() {
$(this).find("ul").show('slow');
},
function() {
$(this).find("ul").hide('slow');
}
);
}
You call it by selecting the elements to apply it to and using it like a regular jQuery function...
$("#red-jeans, #blue-jeans, #yellow-jeans").jeans();
Just for future reference ;)

Just append string:
$(selector + ' ul').hide('slow');

you can try updating your JavaScript function as below:
function jeans(selector) {
// you will have to use 'find' and it wil only be for the first 'ul' as well
$(selector).find('ul:first').hide();
$(selector).hover(
function() {
$(selector).find('ul:first').show('slow');
},
function() {
$(selector).find('ul:first').hide('slow');
});
}
And then call it like this...
jeans('#red-jeans');
jeans('#blue-jeans');
jeans('#yellow-jeans');
I Hope this would help

Need Help for better practice Jquery codes

I am trying to make my jquery codes look better here. My functions are working correctly but I was wondering if anyone can make my codes less ugly. Thanks a lot!
HTML
<div class='image_layout'>
<a href='#'><img src=' a.jpg '/></a>
<br><p class='credits'>hahahah
<br>Agency: Agency1
<br>Picture ID: 5 </p>
</div>
jQuery
$('#image_layout').on('hover', 'img', function() {
$(this).parent().next().next().fadeIn('fast');
})
$('#image_layout').on('mouseout', 'img', function() {
$(this).parent().next().next().fadeOut('fast');
})​

You can pass two functions to jQuery hover - one for mousein, one for mouseout. You can make this change as long as you don't have dynamically added images. Your code would also be a lot simpler if the element you are fading has an ID or class:
$('#image_layout img').hover(
function () {
$(this).closest('.someClass').fadeIn('fast');
},
function () {
$(this).closest('.someClass').fadeOut('fast');
}
);

$('.image_layout').on('hover', 'img', function (e) {
if(e.type == 'mouseover') {
$(this).closest('.image_layout').find('.credits').stop().fadeIn('fast');
} else {
$(this).closest('.image_layout').find('.credits').stop().fadeOut('fast');
}
})
You could also have done:
$('.image_layout').on('hover', 'img', function() {
$(this).closest('.image_layout').find('.credits').stop().fadeIn('fast');
}, function() {
$(this).closest('.image_layout').find('.credits').stop().fadeOut('fast');
});
If you're sure that nothing other than hovering the image will cause the element to fade, you could simply write:
$('.image_layout').on('hover', 'img', function() {
$(this).closest('.image_layout').find('.credits').stop().fadeToggle('fast');
});

Look into Douglas Crockford's JS Style Guide. He'd make your code look something like (with improvements):
var obj = $('#image_layout img');
obj.mouseover( function(){
$(this).parent([selector]).next([selector]).fadeIn('fast');
});
obj.mouseout( function(){
$(this).parent([selector]).next([selector]).fadeOut('fast');
});
You don't need the on, just call the function directly.

I would use .eq as opposed to two next statements, additionally, hover takes two functions, the first being for the mouseenter event, and the second for mouseout
$('#image_layout').hover('hover', 'img', function () {
$(this).parent().eq(2).fadeIn('fast');
}, function () {
$(this).parent().eq(2).fadeOut('fast');
})
References
Take a look at eq here
Read over hover here

Adding delay to jquery event on mouseover

I am trying to add a simple delay to a mouseover event of a child and having difficulties. (Still learning!)
This enables me to show the popup after a delay, but shows all of them simultaneously:
onmouseover='setTimeout(function() { $(\".skinnyPopup\").show(); }, 600)'
and this works to show only the popup I want with no delay:
onmouseover='$(this).children(\".skinnyPopup\").show()'
but the combination does not:
onmouseover='setTimeout(function() { $(this).children(\".skinnyPopup\").show(); }, 600)'
Any help would be appreciated. Thanks!

You need to define what this is when it executes, something like this would work:
setTimeout($.proxy(function() { $(this).children(".skinnyPopup").show(); }, this), 600)
Or just use .delay(), like this:
$(this).children(".skinnyPopup").delay(600).show(0);
Both of the above are quick fixes, I suggest you move away from inline handlers and check out an unobtrusive method (see this answer by Russ Cam for some great reasons), for example:
$(function() {
$('selector').mouseover(function() {
$(this).children(".skinnyPopup").delay(600).show(0);
});
});

It's because this is bound to the global context, not the element. Use something like the following instead:
// put this in your document head -- replace element with a selector for the elements you want
$(function () {
$(element).bind("mouseover", function () {
var e = $(this);
setTimeout(function () { e.children(".skinnyPopup").show(); }, 600);
});
});
If you're adamant about inline event handlers, the following should also work:
onmouseover='var self = this; setTimeout(function() { $(self).children(\".skinnyPopup\").show(); }, 600)'