We Keep Coding

jQuery bind event not firing on elements loaded via $().load()

I have a DIV that is in an .html file that is loaded into my document via:
$(document).Ready( function() {
$("#contentDiv").load("some.html")
//some.html contains a button id=saveButton
$("#saveButton").click( function () {
alert("Here I am!");
}
});
The event will not fire. If I cut the content of some.html and put it in the document, uhm, "physically", the event will fire.
So, I am pretty sure this issue is related to the fact that the html is injected via .load().
It's bothersome, because if you look at the page source, all the HTML is in fact there, including the button.
So, the question is, is there ANY way to make this work? I am using .load() to reduce page complexity and increase readability, and, code-folding notwithstanding, I really do not want to have to pull all this HTML into the document.
EDIT: This code was just typed in off the cuff. It's not a cut-n-past of the actual code, and it is just to demonstrate what the problem is. But, thanks for pointing it out.
EDIT2: Grrrrrrr. });

load() is asynchronus so you need to the job in the callback :
$(document).ready(function() {
$("#contentDiv").load("some.html", function(){
//some.html contains a button id=saveButton
$("#saveButton").click( function () {
alert("Here I am!");
});
});
});
Hope it helps :)

one way is by adding to the some.html the script line which will be loaded as the div appears.
You can add this script to some.html(in a script tag):
registerButton();
and then you can define registerButton() in your current document.
other way, if I remember correctly is by using something like the function bind( )

If you want to fire event on element which was not available at the time when DOM was ready then you need to use .on event.
http://api.jquery.com/on/
$("#saveButton").on("click", function() {
alert("Here I am!");
});

jquery load() function is asynchronous. If you want to bind events to the loaded content, you should put the code into the callback function:
$(document).ready(function() {
$("#contentDiv").load("some.html", function() {
//you should put here your event handler
});
});

Your issue is that jquery load() function is asynchronous as #lucas mention. But his code has syntax errors, try this:
$(document).ready(function () {
$("#contentDiv").load("some.html", function () {
$("#saveButton").click(function () {
alert("Here I am!");
});
});
});
Hope it helps now

You need to bind the event handler either after the load OR to the container of the HTML from the load
$(document).ready(function() {
$("#contentDiv").load("some.html", function() {
$("#saveButton").on('click',function() {
alert("Here I am! Bound in callback");
});
});
});
OR use: (not needed that it be in the document ready just that the contentDiv be present)
$("#contentDiv").on('click','#saveButton',function(){
alert("Here I am! bound to container div");
});
EDIT: load on the SAVE button click (per comments) (this makes no sense though)
$(document).ready(function() {
$("#saveButton").on('click',function() {
$("#contentDiv").load("some.html", function() {
alert("Here I am! Bound in callback");
});
});
});

Why .trigger('change') is not working?

Got this piece of code, which works great. However the .trigger('change') is not working.
$(function () {
$('form').each(function () {
var form = $(this);
form.find('.cbox1').change(function () {
if (form.find('.cbox1:checked').length) {
form.find('.cbox2, .cbox3').button("enable");
} else {
form.find('.cbox2, .cbox3')
.prop("checked", false)
.trigger("change")
.button("refresh")
.button("disable", "disable");
}
});
});
});
I know this is probably something simple, but for a noob like me, it's killing me, been reading and studying for days...
Any knowledge/assistance is greatly appreciated,
Si

It works fine. Try adding this line and you'll see that cbox2 change is triggered.
$('form').find(".cbox2").on("change", function() {alert("cbox2 triggered")});

When you are triggering a change, you are triggering it on .cbox2 and .cbox3. However you have not added any listener for the change event on these elements. The listener for change event is attached only to .cbox1. If that is the listener you want to trigger, then call the the trigger("change") on .cbox1 or add event listeners for the other two elements.

jQuery issue with fancybox

I am using jquery click event to open fancybox and it is working perfect. I have added one textbox inside this inline1 div but when I input something I can't writer anything.
My Code:
$(document).ready(function() {
$(".fancybox").on("click", function() {
$("#inline1").fancybox().trigger('click');
})
});
jsFiddle: my code
Any Idea?
Thanks

There was a problem with the triggering of 'click', I managed to fix this by simply using the Fancybox API to open the Fancybox without requiring a trigger.
$(".fancybox").on("click", function () {
$.fancybox.open( '#inline1' )
});
http://jsfiddle.net/xW5gs/1171/

$(".fancybox").on("click", function() {
$.fancybox($('#inline1').html())
})
check here

PopUp is not opening on mousehover

I am not sure what i am doing wrong here.i have a div and i want to open up a popup if user hover over that div section and want to close on mouseout. here is my code
<div class="topCart">
some data
</div>
this is my JQuery code
$(".topCart").mouseover(function() {
$.get('${rolloverPopupUrl}?bustcache=' + new Date().getTime(),
function(result) {
$('#viewCart').html(result);
refreshMiniCart();
});
$('#viewCart').slideDown('slow');
}).mouseout(function() {
$('#viewCart').slideUp('fast');
});
above code is not working nor its giving any Ajax call to fetch fresh data, while if i use following code
$(document).ready(function(){
$(".topCart").hover( function () {
$('#viewCart').html("");
$.get('${rolloverPopupUrl}?bustcache='+new Date().getTime(), function(result){
$('#viewCart').html(result);
refreshMiniCart();
});
if($('#viewCart').is(':hidden')){
$('#viewCart').slideDown('slow'); }
},
function () {
$('#viewCart').slideUp('fast');
});
});
this piece of code is working and its fetching data so i do not see use of document.ready
with my limited knowledge of Jquery i tried but not able to see the reason of not working of code
can any one point me my error?

Try having some basic structure and cleanliness (which is next to godliness) when typing your code, and spotting errors will be much easier:
$(function() {
$(".topCart").on({
mouseenter: function() {
var elem = $('#viewCart');
elem.empty();
$.get('${rolloverPopupUrl}?bustcache=' + new Date().getTime(), function(result) {
elem.html(result);
refreshMiniCart();
});
if (!elem.is(':visible')) elem.slideDown('slow');
},
mouseleave: function() {
$('#viewCart').slideUp('fast');
}
});
});​

The first code does not work becuse not all DOM elements are downloaded when you set events. And it cause that result of $(".topCart") is empty. This not fire any erros, syntax is correct, problem is jQuery works with html, that are not completed.
$(document).ready(...)
or
$(function() {
// Handler for .ready() called.
});

$(document).ready(function() {
$(".topCart").mouseover(function() {
...
}
});
You need to use the document.ready before events can fire, after the document all DOM elements have loaded which you can be sure of, otherwise you're looking for an event which hasnt laoded into the DOM

Without the $(document).ready(), the first has not actually been bound to $('.topCart').
The second example, using the document ready gives a moment or time at which to bind the function to the hover event.

unload event when using master page

In my project i have used master page.In one particular page , i want a function to be executed on page unload(javascript event) event of that particular page.To achieve this i have written
$('body').bind('unload',function()
{
alert('hello');
} );
But this is not working.This function is not getting called when i move to other page.
How should i achieve this.

Well, I suppose its a problem when writing the question but your code should be:
$(window).bind('unload',function()
{
alert('hello');
});
You are missing the ending ); and the event should be bound to the window...
[Edit: Added the bind to the window instead of 'body']

$(window).bind("unload", function(){
alert(123);
});
worked for me :)

$(document).ready(function(){
$(window).unload( function () {
alert("Bye now!");
} );
});
try this. the document.ready function runs on pageload. so your bind will execute and is should work.