Develop Reference

jQuery click does not fire consistently

I have an issue regarding the jQuery click event. The first time the page get loaded it does not work. After a refresh it works fine. I assume it has to do with the browser caching the files somehow.
This is the code:
$(window).ready(
function() {
$("#language-input").click(function() {
$("#language-dropdown").show();
});
Any ideas what I am missing?

Instead of
$("#language-input").click(function() {
You can use
$("#language-input").on('click', function() {.
This will ensure that the click event is fired even if the element is loaded dynamically.
You final code would be without $(window).ready(function() { :
$("#language-input").on('click', function() {
$("#language-dropdown").show();
});

The solution, which was mentioned in one of the comments, was to use:
$(document).on("click", "#element", function()
This seemed to work for dynamically added elements.

is this javascript code correct?

I am trying to remove a class when clicking on an element with a specific class. I made this javascript and it does work. But is this correct syntax to do it this way Can this be more efficient?
// Clear notifications alerts
$(document).on('click', '.js-clear-notifications', function() {
$('.AlertNotifications').remove();
});
// clear inbox alerts
$(document).on('click', '.js-clear-inbox', function() {
$('.AlertInbox').remove();
});

Your javascript code is correct, provided that you load jQuery as well.
Furthermore you have the most efficient solution, where you use a single event handler to handle events that originate on multiple elements.
The alternative would be:
$('.js-clear-notifications').on('click', function() {
$('.AlertNotifications').remove();
});
Which attaches as many event handlers as there are elements in the jQuery object. Slightly less efficient, though probably you would never notice except in extreme cases.

To me a more proper way to do it is something like this:
...
$('.js-clear-inbox').on('click', function() {
$('.AlertInbox').remove();
});
...
I will also suggest to have more specific selectors i.e.
$('div .js-clear-inbox')
I hope that this helps.

I am editing this in response to the feedback in the comments.
If what you want is to remove all elements with AlertNotifications class, which is what your code does, then what you have is correct.
If what you want is to remove only the class, which is what the text of the post said, you want removeClass, not remove:
$('.js-clear-notifications').on('click',function() {
$(this).removeClass('AlertNotificitions');
}

The new way, if you have already defined the variable, the proper way to delete it from the DOM would be:
var elem = document.getElementById("myDiv");
elem.remove();
But if you are just beginning out, .remove would be your best opinion.

JavaScript alert callback not working inside a function

I am trying to make a image preview containing of about 5-6 images which will appear one after another when user hovers over it (not like a carousel with prev and next buttons). Here is the fiddle consisting of what I gathered so far.. i don't know if this approach is right or not.. but I am stuck as the alert callback is not working. Could someone please tell me what is wrong?
$(function()
{
var imageCount = $('#product_grid_list').find('figure')[0].getElementsByTagName('img');
for (var i = 0, n = imageCount.length; i < n; i++) {
imageCount[i].on('click', function(e)
{
alert('Everything is going fine!');
}
);
}
}
);

The root cause of click event callback can't be triggered is that you're trying to register a event handler on a "DOM" (in this case: imageCount[i]) element in jQuery way. Try to register the event handler like this if you want to use pure javascript solution:
imageCount[i].addEventListener('click', function(e){
alert('Everything is going fine!');
});
Here is a jsfiddle demo.
Note: I didn't consider the cross browser issue in this case.
BTW, try to cache the length of imageCount node list, it will improve the performance.

You are using js AND jQuery at same time. It's wrong. If you use jQuery, than click event will be like this:
$(document).('click', '#product_grid_list figure img', function(){
alert('Everything is going fine!');
});

You are using a mix of jQuery and standalone javascript. You might as well go all the way to jQuery, with something like:
$('#product_grid_list figure:first img').click(function(e) {
alert('Everything is going fine, hopefully!');
});
You did not send the corresponding HTML, so we cannot test whether the above is correct.

it's just a simple click event in jQuery, no need to use js: http://jsfiddle.net/wP3QQ/11/
$('#product_grid_list').find('figure img').click(function(e){
alert('Everything is going fine!');
e.preventDefault();
});

You want the hover effect, so click event should not be used over here. It should be mouseover.
Working Fiddle
Code Snippet:
$(document).on('mouseover','#product_grid_list figure img',function(e){
alert("now it is working");
});

You are attempting to call on(), a jQuery method, on an HTMLElement (a DOM element). You can't do that, jQuery methods can only be called on jQuery collections. It's easy to get a jQuery collection for the elements you desire:
Use .find() to match the images
There's no need for a for() loop, jQuery's .on() will handle looping for you.
You may also want to prevent the default behaviour of your anchors
$(function () {
var imageCount = $('#product_grid_list').find('figure img');
imageCount.on('click', function (e) {
e.preventDefault()
alert('Everything is going fine!');
})
});
JSFiddle

slideUp() and slideDown() not working inside .delegate()

I am developing a website using JQM. I have dynamically created a collapsible via AJAX data. Now, I want to make the collapsible slideup and down smoothly (JQuery mobile). The problem is .delegate function is getting executed, but its using the default sliding speed and not changing. My code is :
$('#search-page').delegate('.menu-collapse','expand', function (event) {
$(this).children().slideDown(300);
}).delegate('.menu-collapse','collapse', function (event) {
$(this).children().next().slideUp(300);
event.stopPropagation();
});
I think some problem with $(this). Can anyone sort it out ? Thanks in Advance.

try , thats work exactly as you want now
$(document).on('pageinit',function(event){
$('[data-role="collapsible"]').bind('expand', function (event) {
$(this).find('.ui-collapsible-content')
.css('display','none')
.slideDown(300, function(){
$(this).css('display','block');
});
}).bind('collapse', function (event) {
$(this).find('.ui-collapsible-content.ui-collapsible-content-collapsed')
.slideUp(300);
});
});
FIDDLE HERE

I think, you need to find way, how you can animate collapsible set, not why delegate not working
see questions like this, and try it out.
But i can't repeat this, because it's bit different.

jQuery hover firing without mouse over

I have an element with id=message1mark. The following code will run the two alerts when the page loads regardless of the position on the mouse. Any help would be appreciated.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#message1mark").hover(alert("on"), alert("off"));
});
</script>

You need to wrap those alerts in functions:
$(document).ready(function(){
$("#message1mark").hover(function(){alert("on");}, function(){alert("off");});
});
Working example: http://jsfiddle.net/eJzKr/

What you tried would be interpreted as
try to call a function (which is why alert() is executed at the time of binding
and bind its result as a handler (which is nothing in this case)
$("#message1mark").hover(function(){
alert("on")
}, function(){
alert("off")
});
});

The correct way is:
jQuery("#message1mark").hover(function() {
alert("on");
},
function() {
alert("off"))
};
});

I believe that the alert() function fires automatically on each page. So even though you've tried to make it dependent on the hover function, it doesn't care.
It sounds like what you want is fundamentally a tooltip functionality. Some of the techniques listed in these resources might be a better way to approach things.
http://jquery.bassistance.de/tooltip/demo/
http://www.roseindia.net/tutorial/jquery/PopupOnHover.html

Instead of writing in two different functions you can include in one function itself. Below is the code for reference.
$(document).ready(function(){
$("#message1mark").hover(function(){alert("on");alert("off");});
});