We Keep Coding

"$(...).find(...)" in onclick-eventhandler

I am using this code for the click handling on a button inside my page:
$(document).on("click", $('#' + GlobalVariables.currentUserType).find(".addDocumentToSection"), function (e) {
addItemToDocumentGrid();
$('#removeDocumentFromSection').disable(true).addClass("disabled");
$('#removeSelection').disable(true).addClass("disabled");
});
But the event fires as soon as I click anywhere in the page. Even if it is not the supposed button which I want to select with $('#' + GlobalVariables.currentUserType).find(".addDocumentToSection").
$('#' + GlobalVariables.currentUserType).find(".addDocumentToSection") returns one element which is actually the button which I want to be selected.
Why does it behave like that?

If you want to use event delegation, the second argument should be a selector, not a jQuery object.
$(document).on("click", '#' + GlobalVariables.currentUserType + " .addDocumentToSection", function (e) {
// ---------------------^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
addItemToDocumentGrid();
$('#removeDocumentFromSection').disable(true).addClass("disabled");
$('#removeSelection').disable(true).addClass("disabled");
});
If you don't want to use event delegation, you need to call on on the element you want to hook the event on:
$('#' + GlobalVariables.currentUserType).find(".addDocumentToSection").on("click", function (e) {
addItemToDocumentGrid();
$('#removeDocumentFromSection').disable(true).addClass("disabled");
$('#removeSelection').disable(true).addClass("disabled");
});
This is all covered in the on documentation.

You are attaching onClick event to a document element. Try:
var button = $('#' + GlobalVariables.currentUserType).find(".addDocumentToSection");
button.on("click", function() {
addItemToDocumentGrid();
$('#removeDocumentFromSection').disable(true).addClass("disabled");
$('#removeSelection').disable(true).addClass("disabled");
});

$('#' + GlobalVariables.currentUserType).find(".addDocumentToSection").on("click", function(e){
});
jQuery can use selectors before the .on("click", this should work for you.

Hiding and showing divs when user uses select box not working correctly

For my website I allow the user to use a drop down to select various options, when they choose an option i have some jquery that should hide or show different pictures according to what they choose. However it doesn't seem to be changing.
I have created a js fiddle and put some text in on the cook section to try and test it but it still isn't working. Can anyone see why?
http://jsfiddle.net/av7E2/
$(document).ready(function () {
$('.box').hide();
$('#option1').show();
$('#select-portion').change(function () {
$('.box').hide();
$('#'+$(this).val()).show();
});
});
$(document).ready(function () {
$('.prepBox').hide();
$('#option10').show();
$('#select-prep-time').change(function () {
$('.prepBox').hide();
$('#'+$(this).val()).show();
});
});
$(document).ready(function () {
$('.cookBox').hide();
$('#cook1').show();
$('#select-cook-time').change(function () {
$('.cookBox').hide();
$('#'+$(this).val()).show();
});
});

Going by your fiddle, select-cook-time is a class and not an id value. Hence you should be using .select-cook-time instead. Try this
$('.select-cook-time').change(function () {
$('.cookBox').hide();
$('#'+$(this).val()).show();
});

I looked at your fiddle. You are using #select-portion when you should be using .select-portion. You seem to have the same problem with all other dropdowns.
Apply this changes and change handlers will be invoked.
$('#select-cook-time') -> $('.select-cook-time')
$('#select-prep-time') -> $('.select-prep-time')
$('#select-portion') -> $('.select-portion')

Well in your fiddle, you have class="select-portion" and in the jquery you are looking for # not .

After cleaning up some of the typos in the markup and cleaning up the jQuery we get this -
$(document).ready(function () { // one document ready handler (although you can use as many as you'd like, this is just cleaner)
$('.box, .prepBox, .cookBox').hide(); // combine selectors
$('#option1, #option10, #cook1').show(); // combine selectors
$('.select-portion').change(function () { // change to class selector
$('.box').hide();
$('#' + $(this).val()).show();
});
$('.select-prep-time').change(function () { // change to class selector
$('.prepBox').hide();
$('#' + $(this).val()).show();
});
$('.select-cook-time').change(function () { // change to class selector
$('.cookBox').hide();
$('#' + $(this).val()).show();
});
});
You can see this in operation here - http://jsfiddle.net/jayblanchard/av7E2/1/

Using .replacewith to change images but maintaining id. After that the image does not fire function on hover anymore

When the user hovers over the image with "id=dot0001" a table with id= "info0001" that contains a checkbox with id="checkbox0001" becomes visible. When the user checks the box the image with id="dot0001" is replaced with an image that has the same id. That part works fine, the user can check and uncheck as much as he wants, the images are replaced correctly. The problem: the table does not come up when the user hovers over the image again after leaving it.
Here I define the function:
function makevisible(a){
$("#tablespace").after(
'<table border="4" id="info'+a+'"class="info'+a+'">'+
'<tr><td>Add to favorits</td><td><input name="" type="checkbox" id="checkboxinfo'+a+'" value=""></td></tr>')
$("#info"+a).css("visibility", "hidden")
$('#checkboxinfo'+a).change(function() {
if($('#checkboxinfo'+a).is(':checked')){
$('#dot'+a).replaceWith('<img src="_index/_dots/dotfavorit.gif" id="dot'+a+'" class="dot'+a+'">')
}
else{
$('#dot'+a).replaceWith('<img src="_index/_dots/dotnormal.gif" id="dot'+a+'" class="dot'+a+'">')
}
})
};
Here I use the function:
$(document).ready(function() {
$("#dot0002").hover(makevisible("0002"))
})
This makes the table visible and hidden after it has been added to the html:
$(document).ready(function() {
$("#dot0002").hover(
function(){
$("#info0002").css({"visibility":"visible"});
},
function(){
$("#info0002").css({"visibility":"hidden"});
}
);
$("#info0002").hover(
function(){
$(this).css({"visibility":"visible"});
},
function(){
$(this).css({"visibility":"hidden"});
}
);
});
Here is a fiddle: http://jsfiddle.net/QzX9C/
I assume the problem is that jQuery does not find the image associated with the id after it has been replaced.
Any help appreciated!

Because you dynamically add elements to the DOM the Hover function dose not get attached to your new elements:
this:
$("#dot0002").hover(
function () {
$("#info0002").css({"visibility": "visible"});
},
function () {
$("#info0002").css({"visibility": "hidden"});
});
will not be attached to the image because it is injected dynamically to the DOM by this line of code:
$('#dot'+a).replaceWith('<img src="_index/_dots/dotfavorit.gif" id="dot'+a+'" class="dot'+a+'">')
unless you reattach it by adding a hover trigger to the .change() function
$('#checkboxinfo' + a).change(function () {
if ($('#checkboxinfo' + a).is(':checked')) {
$('#dot' + a).replaceWith('<img src="_index/_dots/dotfavorit.gif" id="dot' + a + '" class="dot' + a + '">')
}
else {
$('#dot' + a).replaceWith('<img src="_index/_dots/dotnormal.gif" id="dot' + a + '" class="dot' + a + '">')
}
//Add this code at the end to reattach the hover event on the newlly injected image
$('#dot' + a).hover(
function () {
$("#info" + a).css({"visibility": "visible"});
},
function () {
$("#info" + a).css({"visibility": "hidden"});
});
})
Here is your fiddle updated: Link...

Appending data from a handler loaded after the script

I've made a site that displays a user's Facebook photos. The code below appends the photos to the div "facebook-images". This part works fine. The problem I have is that the images are being appended after the Javascript code below is loaded; so the handler "fb-image" is not created when the browser reads the click function code at the bottom, therefore it does not work.
I believe I need to use jQuery on(), but where? I've tried to put on() everywhere in the code below. I've tried to bind with append, I've tried live (which I know is deprecated but worth a shot). Nothing is working.
Any ideas?
<div class="target">
</div>
<div id="facebook-images">
</div>
<script>
$.when(window.deferredes.fbLoaded, window.deferredes.fbLoggedIn).then(function () {
$.getJSON('https://graph.facebook.com/me/photos?access_token=' + FB.getAccessToken(), function (data) {
$.each(data.data, function (i, face) {
$('#facebook-images').append("<div class='fb-image'><img src='" + face.source + "' ></div>");
});
});
});
$(".fb-image img").click(function () {
$(".target").append("<h1>hi</h1>");
});
</script>

The simplest way to fix this is to add the click handlers AFTER the images are inserted into the page.
<script>
$.when(window.deferredes.fbLoaded, window.deferredes.fbLoggedIn).then(function () {
$.getJSON('https://graph.facebook.com/me/photos?access_token=' + FB.getAccessToken(), function (data) {
$.each(data.data, function (i, face) {
$('#facebook-images').append("<div class='fb-image'><img src='" + face.source + "' ></div>");
});
$(".fb-image img").click(function () {
$(".target").append("<h1>hi</h1>");
});
});
});
</script>
You can also use delegated event handling if you want. To do that, you set the event handler on a common parent that does exist at the time you run the event handling code with .on() and you use the delegated form of .on() by passing it a selector like this:
<script>
$.when(window.deferredes.fbLoaded, window.deferredes.fbLoggedIn).then(function () {
$.getJSON('https://graph.facebook.com/me/photos?access_token=' + FB.getAccessToken(), function (data) {
$.each(data.data, function (i, face) {
$('#facebook-images').append("<div class='fb-image'><img src='" + face.source + "' ></div>");
});
});
});
$("#facebook-images").on('click', ".fb-image img", function () {
$(".target").append("<h1>hi</h1>");
});
</script>
The delegated form of .on() works like this:
$(selector of static parent).on(event, selector that matches dynamic object, fn);

Jquery: trying to hide and show on hover on multiple divs with same id plus number

Trying to get a div that looks like <a id="thumblink-10"> to show and hide another div on hover, but no luck.
jQuery(document).ready(function() {
jQuery(document).find("a[id^='thumblink-']").live('hover', function(){
var num = this.id.split('-')[1];
jQuery('#thumb-hover-' + num).show();
}, function(){
//var num = this.id.split('-')[1];
jQuery('#thumb-hover-' + this.num).hide();
});
});
Thanks

This should work for you:
jQuery("a[id^='thumblink-']").live('hover', function(){
var num = this.id.split('-')[1];
jQuery('#thumb-hover-' + num).toggle();
});
Fixed the initial selector to not use find, only need to supply and single function for the hover and use the toggle function to show/hide the content.
http://jsfiddle.net/Zy2Ny/
But the way I would actually do it is to add data attributes to your links (can then change the selector to a class one instead) and use those to find the correct div to toggle like this:
JS
jQuery("a.thumblink").live('hover', function(){
var num = $(this).data('contentid');
jQuery('#thumb-hover-' + num).toggle();
});
HTML
<a class="thumblink" data-contentid="10">Hover</a>
<div id="thumb-hover-10" style="display: none;">Content</div>
http://jsfiddle.net/Zy2Ny/1/

You can't really do traversal methods like find and then use live. You should just use a standard selection. Also, you can't use live with hover and give two functions.
$("a[id^='thumblink-']").live('hover', function(){ // simple selector
Better still would be to use delegate and a map of events and handlers:
$(document).delegate('a[id^="thumblink-"]', {
mouseenter: function() {
},
mouseleave: function() {
}
});

I haven't been able to test it unfortunately, but I believe the following should work:
var id = 10;
$('#thumblink-' + id).hover(function(id) {
return function () {
$('#thumb-hover-' + id).show();
};
}(id),
function(id) {
return function () {
$('#thumb-hover-' + id).hide();
};
}(id)
);