Develop Reference

How is it possible that the jQuery works on Chrome console, but does not itself?

I would like to make a overlay when the uses make hover event on a link.
This part ok, the overlay created and everything fine.
But I also would like to remove this overlay, when user click (or hover) for it, and this part create a strange bug.
I try clicking for the overlay and its dosen't close, nothing happening, but if you paste script to the chrome console, this working fine.
Js, first part, add script:
var overlay = jQuery('<div class="overlay"> </div>');
$("#link-'.$myqlVideoID.'").hover(function() {
$("#hover-").attr("src","http://youtube.com/embed/'.$myqlVideoID.'?autoplay=1");
$(".drop-target").css("background-color","#070707");
$(".drop-target").css("padding","11px");
$(".drop-target").css("margin-bottom","16px");
$(".drop-target").show().fadeIn("3000");
overlay.appendTo(document.body)
});
And the second part, remove overlay:
$(document).ready(function() {
$(".overlay").click(function() {
$("#hover-").removeAttr("src");
$(".drop-target").hide().fadeOut("3000");
$(".overlay").remove();
console.log("clicked");
});
});
My site is where you can see the bug:
http://neocsatblog.mblx.hu/search/
Just search something and scroll down to "Cimkék"

Try delegating the event on the overlay by writing the following:
$(document).on('click', '.overlay', function () {
//The rest of your code
}) ;
And same for the rest of your event handlers.
The reason for this is that the element overlay is being added dynamically, and the script doesn't know about it at the moment when it's being instantiated.

Loading several .php file into one div

Hello i have this code to load php file into div. Its working but i need load next file into this div.
<script type="text/javascript">
$(function() {
$("a.load").on("click", function(load) {
load.preventDefault();
$("#zaw").hide().load(this.href).fadeToggle(1000);
});
});
</script>
<li><a class="load" href="zzz.php">zzz</a></li>
If i click "zzz" link loading file into my div (file table with images) i need hide this page and load next by click image.
UPDATE
Now working
<script type="text/javascript">
$(function() {
$("a.load").on("click", function(load) {
load.preventDefault();
$("#zaw").hide().empty().load(this.href).fadeToggle(1000);
});
});
</script>

You just simply need to bind another click event to an image (or table body) that you load through load() function. However, you may experience some issue with your click not working, and heres why:
If you attach two click handlers, one for a.load and second for, let's say, .image than only the first event will actually get bind to its element, and the socond one won't be attached because, well, .image doesn't exist yet - not untill you load it.
You could expect, that once you php file content will get loaded (with .image elements in it), then clicking them will fire an action you have declared, but it won't - those .image's are new DOM elements and they missed an event binding procedure which was done only once when the DOM was created (or DOM was ready if you use $.(document).ready()).
So, in order to get those clicks to work you need to either attatch them on load() function callback, like so:
$("a.load").on("click", function(load) {
load.preventDefault();
$("#zaw").hide().load(this.href, function(){
$(".image").on("click", function(e) {
$("#zaw").hide().load(/* load what you want */);
});
})
.fadeToggle(1000);
});
or insert .image click event binding inside php file you are loading or use some sort of delegation, for example:
$(document).on('click', '.image', function(){
/* do what you want */
});
which will make sure that even new, dynamically created DOM element will fire an action you want.

Change Div Class on click takes multiple clicks before it works

I used the methods in this question:
change div class onclick on another div, and change back on body click
So here's my jQuery function:
jQuery('.checkbox_wrapper').on('click', function(e){
jQuery(this).parent()
.toggleClass('not_selected')
.toggleClass('selected');
});
However it doesn't seem to be working properly. It takes multiple clicks before the class changes.
See my jsfiddle:
http://jsfiddle.net/7A3vw/
I cut it down to the bare essentials thinking it might be conflicting javascript, but even with the single function it takes multiple clicks before the class actually changes. Because the production environment has 1 click toggle a hidden checkbox, multiple clicks is not reasonable.
Could someone help me figure out what's causing this issue?

The click function fires twice, once for the image, and once for the input, as both will bubble to the parent element, and firing twice reverts the classes again (proof).
Just target the image instead, as that is what you're really trying to click, not the parent :
jQuery('.deck_card img').on('click', function (e) {
jQuery(this).closest('div').parent().toggleClass('not_selected selected')
});
FIDDLE

i guest you need the checkbox checked together with the toggling of your div.
$(document).ready(function(e) {
$('.checkbox_wrapper').on('click', function(e){
var checked = $(this).find('input[type="checkbox"]').is(":checked");
if(checked){
jQuery(this).parent().addClass('selected').removeClass('not_selected');
}else{
jQuery(this).parent().addClass('not_selected').removeClass('selected');
}
});
});

Your code is triggering click event twice. So use .preventDefault()
This makes the default action of the event will not be triggered.
$('.checkbox_wrapper').on('click', function(e){
$(this).parent()
.toggleClass('not_selected')
.toggleClass('selected');
e.preventDefault(); // prevent the default action to be
}); // triggered for next time
Check this JSFiddle

try this
jQuery(document).on("click",'.checkbox_wrapper', function(e){
jQuery(this).parent()
.toggleClass('not_selected')
.toggleClass('selected');
});

Multiple Clicks are getting triggered because you are using class selector. You need to use not to exclude extra elements :
jQuery("div.checkbox_wrapper :not('div.checkboxdiv')").on('click', function(e){
jQuery(this).parent()
.toggleClass('not_selected selected')
});
Here is a FIDDLE.

jQuery function prevents add / remove class on click

I'm trying to have a div get a new class (which makes it expand) when being clicked, and get it back to the old class (which makes it close) when clicking on a cancel link inside that div.
<div class="new-discussion small">
<a class="cancel">Cancel</a>
</div>
<script>
$('.new-discussion.small').click(function() {
$(this).addClass("expand").removeClass("small");
});
$('a.cancel').click(function() {
$('.new-discussion.expand').addClass("small").removeClass("expand");
});
</script>
Now, adding the expand class works flawlessly, but closing the panel after clicking on the cancel link only works when I remove this code:
$('.new-discussion.small').click(function() {
$(this).addClass("expand").removeClass("small");
});
So I guess this must be preventing the second function to work, but I really can't figure out why.
Any ideas?
Thanks!

Try this
$('a.cancel').click(function() {
$('.new-discussion.expand').addClass("small").removeClass("expand");
return false;
});
Reason may be your click event is getting propagated to parent which is also listening to click event.

Since your a element is inside the .new-discussion element, when you click on the a, it also fires the click event on the parent element because the event is bubbling up.
To fix it, you can stop the propagation of the event by calling e.stopPropagation();. That will prevent any parent handlers to be executed.
$('a.cancel').click(function(e) {
e.stopPropagation();
$('.new-discussion.expand').addClass("small").removeClass("expand");
});

Since the link is inside the <div>, it's using both click methods at once. It might help to do a check to see if the container is already open before proceeding:
<script>
$('.new-discussion.small').click(function() {
if ($(this).hasClass("small")) {
$(this).addClass("expand").removeClass("small");
}
});
$('a.cancel').click(function() {
$(this).parent('.expand').addClass("small").removeClass("expand");
});
</script>

JQuery Event repeating in dynamic content

In a page of a website I'm making, the press of a button imports the contents of a another php page and appends it onto the page. However, that other page contains JQuery, and the click event($( ".ExpandRoleButton").click) repeats itself on previous elements every time I import the content. So if I add 3 elements;
Element 1: Repeats the click event 3 times
Element 2: Repeats the click event 2 times
Element 3: Runs the click event once
$("#AjouterPiece").click(function()
{
$.blockUI({ message: '<img src="images/ChargementGeant.gif"/><br/><h1>Un moment svp.</h1>' });
$.post("wizardincl/piste.php", {newPiste: newPiste}, function(data)
{
$("#wizardPistes").append(data);
$.unblockUI();
$(".divNewPiste").fadeTo(300, 1);
$("#nbExemplaires").attr("max", newPiste);
newPiste++
$( ".ExpandRoleButton").click(function()
{
if ($(this).hasClass('RetractRoleButton'))
{
$(this).find('img').attr('src', 'images/ExpandPetitNoir.png');
var that = $(this);
$(this).parent().parent().parent().parent().next().slideUp(500, function() {
that.parent().parent().parent().parent().css('border-bottom', '1px solid #FF790B');
});
$(this).removeClass('RetractRoleButton');
}
else
{
$(this).parent().parent().parent().parent().css('border-bottom', 'none');
$(this).find('img').attr('src', 'images/ExpandPetitNoirRetour.png');
$(this).parent().parent().parent().parent().next().slideDown(500);
$(this).addClass('RetractRoleButton');
}
});
});
});
Currently, part of the JQuery website seems down and after some search, I can't find anything to solve the problem. Is there any way to keep the code from repeating itself like this?

This is because you are binding the event to multiple event handlers. The first time #AjouterPiece is clicked, all .ExpandRoleButton buttons get binded to an onclick handler.
The next time #AjouterPiece is clicked, it gets binded again.
To prevent this, you must unbind the click handlers using the following code before binding it
$( ".ExpandRoleButton").unbind('click')

You can pass in the event with .click(function(e) {...}) and then call e.stopImmediatePropagation() to fire only the current handler, but that only addresses the symptom, not the real problem.
Edit: make sure you are only binding the new instance of the button by adding a context to your selector, like $('.ExpandRoleButton', data). Since you are matching on a class, that selector will grab all the buttons on the page; the context allows you to select only the one inside your result.

A good practice ( solely to prevent issues like this from occurring, unintended multiple click handlers added ) is to..
$(".selector").off('click').on('click', function...
or
$(".selector").unbind('click')...
$(".selector").bind('click')...