We Keep Coding

jQuery blur function not working first time

I am currently having a problem on blur() function because it needs the user first to click outside the frame or in page body before it works.
Here is the link for the code:
$(document).ready(function(){
$( window ).blur(function(){
alert("you click the IFRAME!");
});
});
https://jsfiddle.net/gaoj6fzs/15/
What I want is that, the alert will prompt when I click the IFRAME without needing to click first any part outside the frame.

You probably want the click/focus event.
// click
$(document).ready(function(){
$( window ).click(function(){
alert("you click the IFRAME!");
});
});
// focus
$(document).ready(function(){
$( window ).focus(function(){
alert("you click the IFRAME!");
});
});

JavaScript :
$('iframe').load(function(){
$(this).contents().find("body").on('click', function(event) { alert('test'); });
});
$('iframe').attr("src","JavaScript:'iframe content'");
HTML
<iframe></iframe>
DEMO HERE
Note 1: Both pages are in the same domain.
Note 2: If you have two or more iframes, you must give separate id's for them

What you can do is find the contents of the iframe and if the contents match what you wanted then the user clicked on the iframe else did not
Now check it
$('iframe').load(function(){
$(this).contents().find("body").on('click', function(event) { alert('test'); });
});
hope this helps

Prevent parent event fire on jQuery

I have very annoying problem in my code.
When I change a checkbox state, the click event of it parent fires as well.
I've tried different methods to solve this problem like:
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
return false
Unfortunately no one works for be (probably it's not related to "event propagation" issue). How can I make ('.sortable').click not to be fired on checkbox change?
HTML
<div class="sortable">
<span>Hello all!</span><br />
<label>Click on me<input type="checkbox" checked="checked" /></label>
</div>
jQuery
$(function(){
$('.sortable input[type=checkbox]').change(function(event){
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
alert('checkbox changed');
});
$('.sortable').click(function(){
alert('sortable clicked');
});
});
You can find the code on: Demo

As you have bind click event to parent div, it is firing that also. You can check the 'target element if not checkbox' condition in parent click event handle like below
$('.sortable').click(function(event){
if(event.target.type!="checkbox")
console.log('sortable clicked');
});
Demo

coz You're Stopping propagation of .change() event and handling .click() event
Just Try changing:
$('.sortable input[type=checkbox]').change(function(event){ ... });
to:
$('.sortable input[type=checkbox]').click(function(event){ ... });
Hope it helps!
Here is a working example: http://fiddle.jshell.net/vjKGv/

I have done some research on jsfiddle
$(function(){
$('.sortable').click(function(e){
e.preventDefault();
console.log('sortable clicked');
});
$('.sortable input[type=checkbox]').click(function(event){
//event.stopImmediatePropagation();
event.stopPropagation();
//event.preventDefault();
console.log('checkbox changed');
});
});

prevent event bubbling in jQuery

I have a click event as
$(document).on('click', '#btn1', function(e){
alert('clicked');
e.stopPropagation();
e.stopImmediatePropagation();
return false;
alert('clicked again');
});
However, the clicked again is always showing.
Even after the return false; the click event is executing again.
How can i ensure a 1 time execution.

Use one() instead
$(document).one('click', '#btn1', function(e){
alert('clicked');
});
one documentation

Interface menu, close if opened and user clicks outside menu

I'm trying to improve the interface of the menu here:
http://jsfiddle.net/u5brv/2/
I think it's great that it is toggled on click but I do think that if the user clicks anywhere else, for example, the bottom corner of the screen, the menu should toggle close if it isn't already.
$(document).ready(function () {
$('#nav li').mousedown(function () {
$('ul #items').toggle(100);
});
});
How would one approach this in an efficient a way as possible? If the menu is open do we need to track every mouse click and see if it is on the menu or not?

You need to attach a click handler to the document which closes the menu:
$('#nav li').click(function (e) {
e.stopPropagation();
$('ul #items').toggle(100);
});
$(document).click(function() {
$('#items').hide();
});
Note that stopPropagation is required on the opening link to stop the event reaching the document itself.

$(document).ready(function () {
$('#nav li').mousedown(function (event) {
event.stopPropagation();
$('ul #items').toggle(100);
});
$(document).mousedown(function(e) {
$('ul #items').css('display','none'); //make all inactive`enter code here`
});
});

Click event when not clicking on an element

Maybe I'm, just tired but I have a right click menu that I want to close when the user clicks anywhere else than the menu. But I cant figure out how to make it disappear when the user clicks on something else.
Here is the code for showing the menu:
// If mouse click on was pressed
$('#content_list table tr').bind('mouseup', function(event) {
// if right click
if(event.which == 3) {
showRightClickMenu(event);
}
event.preventDefault();
event.stopPropagation();
});
And this is what I got for hiding the menu
// If mouse click outside document
$(document).bind('blur', function(event) {
hideRightClickMenu();
event.stopPropagation();
});
// If mouse click not on the menu
$('*:not(#rightClickMenu *)').bind('mousedown keydown', function(event) {
hideRightClickMenu();
event.stopPropagation();
});
The first bind checks if the user clicks outside the document and the second bind checks if the user clicks on everything except the menu.
But the second one doesn't really work. If I click on the menu the menu is hidden.
Shouldn't be so hard imo... Anyone got any ideas?

Try it this way
$(document.body).bind('click', function() {
hideRightClickMenu();
});
$(window).bind('blur', function() {
hideRightClickMenu();
});

Try with focusout() event and using on() instead of old bind(). This will work even with multiple submenus.
http://jsfiddle.net/elclanrs/jhaF3/1/
// Something like this...
$('#menu li').on('click', function() {
$(this).find('ul').show();
}).find('ul').on('focusout', function(){
$(this).hide();
});