[jQuery] Binding click and double-click events independently?
I've got a function that generates a new div on the page and then
binds two functions to the new divs. The click event function causes
another div to appear on the page. The double-click function causes
the div to fade out. When you double-click on a div, it disappears;
however, it also generates two new divs! Is there a way to bind a
click and double-click function to an object and have only one or the
other operate?
<pre>
function magicDivMaker() {
//name the new div
var newDiv = 'magicDiv'+j;
//generate the div string
magicDivHtml = '<div id="' + newDiv + '" style="display: none;
width: 150px; height: 150px; background-color: #456;"></div>';
//add the new div string to the dom in the body element
$('body').append(magicDivHtml);
$('#'+newDiv).fadeIn('slow');
//bind a click event function to the new div
$('#'+newDiv).bind("click", magicDivMaker);
//bind a new double-click event to the new div
$('#'+newDiv).bind("dblclick", yay);
//increment the div counter
j++;
}
</pre>