Develop Reference

How to make checkboxes go to a url?

I am using jquery currently and I bind an event handler to checkboxes to bring users to a new page. The problem is that this does not scale well as binding 1500 checkboxes can cause ie8 on slower machines to think the script is not responsive when taking 2-3 seconds to bind these event handlers.
The only other solution I could think of was to use images instead of checkboxes so that they could be surrounded by an tag instead of having 1500+ event handlers bound. I do not prefer this solution as in general I dont think it's good practice to override the browser's default behavior/style.
Does anyone know a scalable way to bring users to a url when a checkbox is clicked?

The new jQuery recommandation is to put handlers on a common parent, like document, using .on:
$(document).on("click", ":checkbox", function () {
// your handler code
});
The handler isn't attached to your 1500 checkbox but the event naturally bubble to the document that check if the event target match your selector.

You could just use the 'onchange' method to check if it's 'checked' and then change the 'document.location.href' to the link you want.
<input type="checkbox" onchange="if(this.checked) document.location.href='http://www.google.com';"/>Go to google

$(document).ready(function() {
$(document).on('click', 'checkbox', function() { // <-- assuming your checkboxes are loaded asynchronously
window.location= "http://www.example.com";
});
});

Using jQuery delegate (on) with a check box causes huge delay in response - why?

Hi I have a dynamically create table which acts as a pick list using check boxes. I Want these check boxes to be mutually exclusive. So upon checking a box I need to clear any other checked boxes.
$(document).on("keydown", "#list_Instructors input.allocate",function(event){
alert("hit");
$("#list_Instructors input.allocate").removeAttr('checked');
$(event.target).attr('checked', 'checked');
});
This sort of works but there is a huge delay between clicking and anything happening which is no good. I have tried all sorts of combinations with no success.
Is there is simple explanation as to why this is creating a delay.

Your problem is you bind on method for whole DOM which is really BAD.
So always try to bind that to the closest div (closest parent element) which your controls are exist.
And second thing is always cache your selectors for better performance.Like below
var dataTable=$('#dataTable');
dataTable.on("click", function(event){
alert($(this).text());
});
About Event performance from Jquery API says like below.
Attaching many delegated event handlers near the top of the document
tree can degrade performance. Each time the event occurs, jQuery must
compare all selectors of all attached events of that type to every
element in the path from the event target up to the top of the
document. For best performance, attach delegated events at a document
location as close as possible to the target elements. Avoid excessive
use of document or document.body for delegated events on large
documents.

What you might be seeing is that until the alert box is dismissed, the code afterwards is not executed. The alert command is a blocking one.
Perhaps you can use console.log() for debugging purposes of this feature. This will not block your code and it will be executed on the keydown event.

You need to use $(this) instead of going through another lookup. Also as stated above try to bind to the closest parent element if possible, for example a container div. With that said this should speed you up a bit:
$(document).on('keydown', '#list_Instructors input.allocate', function (event) {
//alert("hit");
console.log('hit');
$(this).removeAttr('checked');
$(event.target).attr('checked', 'checked');
});
But you should try to replace document with a container div or another parent element

Jquery global events and dynamically added content

I'm trying to trigger my own custom events as global events, so that anything on my page can listen to them and react, however, for dynamically added content it's not working. See my fiddle at: http://jsfiddle.net/6TMkG/8/
As far as I understand, the event is triggered for any element in the page that jQuery knows has a handler for it, and it seems it doesn't trigger the event for the li's even though they do have a handler.
Anyone know how to get around this behaviour?

try this
$("#b2").click(function() {
//$.event.trigger("randomEvent");
$('li').trigger('randomEvent');
});

If you want global event, then you could bind the event handler on document, and trigger it on any element in the document.
$(document).on('randomEvent', callback);
$('ul').click(function() {
$(this).trigger("randomEvent");
});

Sorry I completely missed that.. I did not see the first part of your question.. Custom events.. Looks like you are associating the randomEvent but you are not triggering that event when that is associated with it..
Make sure you add the trigger Event in the Document.Ready function so that the evnet handler is associated with as and when the element is available.

Performing an action on Parent/Child elements independently

I have HTML similar to the following in my page
<div id="someDiv">
<img src="foo.gif" class="someImg" />
</div>
The wrapper div is set up such that when it is clicked, it's background-color changes using the following jQuery code.
$("div").click(function(event){
$(this).css("background-color", "blue");
});
I also have some jQuery associated with my img that will do some other function (for the sake of argument I am going to display and alert box) like so:
$("img[class=someImg]").click(function(event){
alert("Image clicked");
});
The issue I have come across is that when I click on the img, the event associated with the div is also triggered. I'm pretty sure that this is due to the way that jQuery (or indeed JavaScript) is handling the two DOM elements - clicking the img would require you to also technically click the div, thus triggering both events.
Two questions then really:
Is my understanding of the
DOM/JavaScript flawed in some way or
is this actually how things are
occurring?
Are there any jQuery methods that
would allow me to perform actions on
a child element without invoking
those associated with its parent?

That is known as event bubbling, you can prevent it with stopPropagation():
$("img[class=someImg]").click(function(event){
alert("Image clicked");
event.stopPropagation();
});
.
Is my understanding of the DOM/JavaScript flawed in some way or
is this actually how things are
occurring?
That is because of what is known event bubbling.
Are there any jQuery methods that would allow me to perform actions
on a child element without invoking
those associated with its parent?
Yes, you need stopPropagation()

No, this is by design. Events bubble up through the entire dom, if you put another handler on body, it would fire too
Yes :) JQuery normalizes the event object, so adding event.stopPropagation() in your img click handler will give you the behavior you expect on all browsers

The problem you just facing is called "event bubbling". That means, if you click on a nested
element, that click event will "bubble up" the DOM tree.
If other elements also are bound to an click event, their listeners will fire aswell.
Solution to prevent this is called:
stopPropagation()
which is used within your event handler
$("img[class=someImg]").click(function(event){
event.stopPropagation();
alert("Image clicked");
});

This is what's called event bubbling, and you can stop it to get the behavior you want with .stopPropagation() (or return false; if you want to stop the event completely, including handlers on the same level), like this:
$("img[class=someImg]").click(function(event){
alert("Image clicked");
event.stopPropagation();
});
You can view a demo here, comment it out and click run again to see the difference.
The short version is that when most event types happen, they happen on the immediate element, then bubble up the DOM, occurring on each parent as they go. This is not jQuery specific at all, native JavaScript does this. If you're more curious, I'd read the linked article, it has a great explanation of what's going on.

Jquery help with mouse events, events not unbinding

Any ideas why this doesn't work, or how to make it work? I want to remove the "onmouseover" and "onmouseout" events so they are basically disabled and at the same time change the background color. Then when the user clicks on another element I want to reassign the mouse events back to the element. Right now the onmouse events don't get disabled at all, the background doesn't change, etc.
Here's how I call the function:
Here's the function:
$(document).ready(function(){
$(".maximize").toggle(
function(){
$("#property_bg").unbind("onmouseover");
$("#property_bg").unbind("onmouseout");
$("#property_bg").toggleClass("body_bgcolor");
},
function() {
$("#property_bg").bind("onmouseover", function() {
swap_class("property_bg","body_bgcolor")} );
});
});
Thanks for the help.

Remove the "on" from the event names. Then it'll work.

on your events, take out the 'on'... just mouseover or mouseout...

I found out the real problem in the following two threads for anyone who comes along with a similar problem I will add them here:
How do I unbind "hover" in jQuery?
Why this unbind doesn't work?
The problem was solved by not hard coding the mouse events in the HTML, but rather binding them in the document.ready 1st. In order to "unbind" and event, the event has to be "binded" by jquery.
Also, "mouseover" didn't work for some reason I couldn't figure out, but when I put "mouseenter" and "mouseleave" as suggested in one of the posts above it worked. I've never heard of "mouseenter" or "mouseleave", but ... it works now.
Good luck!