We Keep Coding

jquery - click event binding and launching on page load

Happy Friday errybody!
Alright, so I'm having trouble binding a 'click' event when a particular class of divs load.
What happens is that the 'click' event is being triggered on load. I've even tried unbinding before I bind.
onAppLoad = function() {
console.log('span 4 loaded');
hovering = function() {
console.log('hovering!');
}
$.each($('.span4 > a'), function() {
var whichApp = $(this).attr('data-content');
$(this).unbind('click');
$(this).bind('click', hovering());
})
}
$('.span4').load(onAppLoad());

You have a syntax error:
$(this).bind('click', hovering());
Here you are calling the function hovering while what you want it to give the reference. Try this :
$(this).bind('click', hovering);
Your .load() is wrong too (for the same reason).
$('.span4').load(onAppLoad);
Side note about the .each. When you are iterating a jquery object, you should write it like that :
$('.span4 > a').each(function() {})

Couple of things I see i your code:
1. You're missing a closing bracket for onAppLoad()
2. Change $(this).bind('click', hovering()); to $(this).bind('click', hovering);
3. Change $('.span4').load(onAppLoad()); to $('.span4').load(onAppLoad);
Out of curiosity, why not put all event handlers in a $(document).ready() event?

dynamically bind .on() method with event-map

I'm using this syntax to make sure that the events bind on dynamically added li elements
$('ul.list').on('click', 'li', function() {
//do something
});
I tried to archive the same with an event-map like this:
$('ul.list').hammer({
css_hacks : false
}).on({
swipe : function(event){
//do something
},
doubletap : function(event){
//some more code
}
}, 'li');
but its not working at all.
If I bind the events directly to the li element it works fine for existing elements, but not for dynamically added elements.
$('ul.list').find('li').hammer({
css_hacks : false
}).on({
swipe : function(event){
//do something
},
doubletap : function(event){
//some more code
}
});
How to bind the event-map to future elements?

on() with 2 parameters is eqvivalent to the old bind() functionality.
If you want to make it work like live() did, pass a third argument like in your first example.
Also, if your'e having trouble when chaining functions on the hammer() method, inspect it and make sure that it returns "this".
$('ul.list').on({
swipe : function() { ... },
doubletap : function() { ... }
},'li');

if you look into jquery document,jquery live
it says,Chaining methods is not supported. For example, $("a").find(".offsite, .external").live( ... ); is not valid and does not work as expected.
so you can do this:
$('ul.list > li').hammer({
css_hacks : false
}).live({
swipe : function(event){
//do something
},
doubletap : function(event){
//some more code
}
});
but it's deprecated, I think your first example should work.
I tried this:
<ul>
<li>aaa</li>
<li>bbb</li>
</ul>
and
$("ul").on({
click:function(){
$(this).html('clicked');
},
dblclick:function(){
$(this).html('double clicked');
}
},'li');
it works, so i guess your problem may be the name of event.

jquery unbind special event?

There is my code that I want to alert "test" once when mousemove , and then remove the mousemove event , but i use unbind() seem not work, can somebody help me ??
$(document).ready( function(){
$(document).mousemove( function(){
alert( "test" );
$(document).unbind("mousemove");
});
});

Simply use $.one() to bind a one-time use event handler.
$(document).ready(function() {
$(document).one("mousemove", function() {
alert("test");
});
});

I think its now on and off instead of bind/unbind
Can you please try
$(document).off("mousemove");

How to check if there is already a click/event associated to an element

lets say I have
function trigger(){
$('a.pep').each(function(){
$('a.pep').click(function(){
console.log($(this).val());
});
});
}
function push(){
$('body').append('<a class="pep">hey mate i have no trigger yet</a>');
trigger(); //now i do but the others have duplicated trigger
}
$(document).ready(function(){
$('a.push').click(function(){
push();
});
});
So it seems that the click event is being applied twice/+ because the console.log is lauched more than once by click
How can i prevent this?

The problem is that you call $('a.pep').click() lots of times. (In fact, you bind as many click handlers as there are matching elements to each element. And then you do it again every time one of them is clicked.)
You should lever the DOM event bubbling model to handle this. jQuery helps you with the on method:
$(document.body).on('click', 'a.pep', function() {
console.log('element clicked');
$(document.body).append('<a class="pep">Click handlers handled automatically</a>');
});
See a working jsFiddle.
Note that I have removed the val call, because a elements can't have a value... Note also that the on method is introduced in jQuery 1.7; before that, use delegate:
$(document.body).delegate('a.pep', 'click', function() {

Small change to your trigger function is all you need. Just unbind the click event before binding to ensure that it is never added more than once. Also, you don't need to use each when binding events, it will add the event to each item automatically.
function trigger(){
$('a.pep').unbind('click').click(function() {
console.log($(this).val());
});
}

You can check using data('events') on any element if the required event is attached or not. For example to check if click event is attached or not try this.
if(!$('a.pep').data('events').click){
$('a.pep').click(function(){
console.log($(this).val());
});
}

you should use jQuery live here because you add DOM elements dynamicly and you want them to have the same click behaviour
function push(){
$('body').append('<a class="pep">hey mate i have no trigger yet</a>');
}
$(document).ready(function(){
$('a.push').click(function(){
push();
});
$('a.pep').live('click', function(){
console.log($(this).val());
});
});

Try:
if($('a.pep').data('events').click) {
//do something
}

i think if you use live() event you dont need to make function
$('a.pep').live('click', function(){
console.log($(this).val());
});

jQuery blur event fireing multiple times with dynamic content edit

When I click on a div element of a certain class, I change contenteditable to true. onblur of that clicked div I want it to alert something. The first time that I blur the div, it works fine, but after that it shows the same alert twice. So the first time, it alerts once. The second time, it alerts twice, etc.
What am I doing wrong?
content = $('#content');
content.delegate('div', 'click', function(event){
$(this).attr('contenteditable', 'true');
$(this).focus();
$(this).bind('blur', function(){
alert('blur');
});
});
Example: http://jsfiddle.net/W8que/4/

You're binding the blur again on each click. Each bind is new and they are stacking. Use .delegate() (or .on())for the blur function also.
fiddle: http://jsfiddle.net/W8que/11/
code:
content = $('#content');
content.on('click', 'div', function(){
$this = $(this);
$this.attr('contenteditable', 'true');
$this.focus();
});
content.on('blur', 'div', function(){
alert('blur');
});
Since the fiddle was already using jQuery 1.7.x, I went ahead and swapped out .delegate() for the more up-to-date .on(). Slipped in a few other things like caching $(this) and didn't bother passing the event into the function since there's nothing we need to preventDefault() or stopPropagation() on.

for prevent call multiple blur you can use 'off' before 'on'
for example :
$inputs.off().on("blur", function() {
})