Develop Reference

Jquery .focus()-loop?

I am trying to apply a new Style to my Submit-Button if its focused.So if its focused, the Style changes, but i cant get rid of it.Means that i cant lose focus on my Button.The other Problem is, that when focused the button moves like 2-3pixel down.
$(document).ready(function(){
$(".login").hover(function() {
$(this).toggleClass("hoverbutton");
});
$(".login").focus(function(){
$(this).toggleClass("focusbutton");
return false;
});
});
Hope someone can help me out with this :)

try this
$(document).ready(function () {
$(".login").hover(function () {
$(this).toggleClass("hoverbutton");
}, function () {
$(this).toggleClass("Normalbutton");
});
});
OR
$(document).ready(function () {
$(".login").hover(function () {
$(this)
.removeClass("normalbtn")
.addClass("hover_btn");
}, function() {
$(this)
.removeClass("hover_btn")
.addClass("normalbtn");
});
});
Refer Here

According to the jQuery API (http://api.jquery.com/hover/), hover accepts two functions:
$( ".login" ).hover(
function() {
// This part is called on Mouse over
$( this ).addClass( "hoverbutton" );
}, function() {
// This part is called on Mouse out
$( this ).removeClass( "hoverbutton" );
}
);

$(".login").blur(function(){
$(this).removeClass("focusbutton");
return false;
});
Added this after .focus() and works fine for me

You are looking for wrong events,
Look at jQuery API: http://api.jquery.com/blur/

Triggering datepicker from function doesnt work

I use a pickadate.js plugin.
What i would like to do is to trigger a date container after checkbox is checked, but it somehow doesn't work. I assume it has to do something with out of the scope variables since it works just fine outside the checkbox event function.
Official documentation:
See here and also here
JS:
var pick = $('#chosen').pickadate({format:'dd.mm.yyyy'});
var picker = pick.pickadate('picker');
//picker.open();
// it works here
$(":checkbox").change(function() {
if(this.checked) {
picker.open();
// it doesnt work here
event.stopPropagation();
console.log('checkbox triggers!');
}
});
JSFIDDLE

Use .on() with click. (like (.on("event", fn)))
$(":checkbox").on('click', function () {
if (this.checked) {
picker.open();
event.stopPropagation();
}
});
Fiddle

I used trigger method and now I think it works as intended:
$( "input[type=checkbox]" ).on( "click", function(){
$(":checkbox").trigger("change");
} );
Fiddle

how to add click event for newly appended div in jquery?

this is my html
<div id="main">
<div class="submit">welcome</div>
</div>
this is my jquery
$(".submit").click(function()
{
$("$main").append('<div class="submit">welcome</div>');
});
here what happen this is working for first div .This event is not working for newly added div ?
how to solve this ?

You've two options, delegation (assigning the click-handler to be detected by the parent):
$('#main').on('click', 'div.submit', function(){
// this is your click-handler
});
Or by binding the click-handler at the point of element-creation:
$(".submit").click(function() {
$('<div />', {
'class' : 'submit',
'on' : {
'click' : function(){
// this is your click-handler
}
}).appendTo('#main');
});
Obviously, if you have a named-function to call you can assign that instead of using the anonymous function:
$('#main').on('click', 'div.submit', namedFunctionToCall);
Or:
$(".submit").click(function() {
$('<div />', {
'class' : 'submit',
'click' : namedFunctionToCall
}).appendTo('#main');
});
References:
Creating elements, with jQuery.
on().

Use delegation:
$("#main").on("click", ".submit", function()
{
$("#main").append('<div class="submit">welcome</div>');
});
And replace the $ with # when selecting #main.

Use event delegation
$("#main").on('click', '.submit', function () {
$("#main").append('<div class="submit">welcome</div>');
});
Demo: Fiddle

You need to define # if your using div id like
$("#main").append();
In case if your using class it can be access by . like that
$(".main").append();

Try this
$(function(){
$('.submit').bind('click', function (event) {
alert("Hello");
});
});

You can use live Function
$( ".submit" ).live( "click", function() {
alert("Appended" ); // jQuery 1.3+
});

Jquery on hover not functioning

I'm changing my codes to be compatible with jQuery 1.8 and I'm stuck with this hover which doesn't work. When I used then same thing with a click it worked. Here is my code, can anyone tell me where I'm going wrong?
$(document).on('hover', '.top-level', function (event) {
$(this).find('.actionfcnt').show();
$(this).find('.dropfcnt').show();
}, function () {
$(this).find('.dropfcnt').hide('blind', function () {
$('.actionfcnt').hide();
});
});

Deprecated as of jQuery 1.8: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.
Source: http://api.jquery.com/on/#additional-notes
That pretty much says it all, you cant use "hover" for that:
$(document).on('mouseenter','.top-level', function (event) {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
}).on('mouseleave','.top-level', function(){
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});

there is no "hover" event.
there is .hover() function that takes 2 callbacks (as in your example).

Try:
$(".top-level").on({
mouseenter: function (event) {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
},
mouseleave: function (event) {
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
}
});
OR
$(".top_level").on("hover", function(event) {
if(event.type == "mouseenter") {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
}
else if (event.type == "mouseleave") {
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
}
});

.on function has only 3 parameters : http://api.jquery.com/on/
If you don't need your handlers be bound to dynamically added elements as well, then you may use the good old hover function with 2 event handlers.
$('.top-level').hover(function (event) {
$(this).find('.actionfcnt').show();
$(this).find('.dropfcnt').show();
}, function (event) {
$(this).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});​
By the way, $(selector).hover(handlerIn, handlerOut) is shorthand for $(selector).mouseenter(handlerIn).mouseleave(handlerOut);.
If you need to, then use on for mouseenter and mouseleave events:
$(document).on('mouseenter', '.top-level', function (event) {
$(this).find('.actionfcnt').show();
$(this).find('.dropfcnt').show();
}).on('mouseleave', '.top-level', function (event) {
$(this).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});​

Try
$('.top-level').hover(function (event) {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
}, function(){
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});

how to make the child div not alert something when i only defined the parent div's click function

this is my code:
<div id="a" style="position:absolute;width:200px;height:200px;background:red;word-wrap:break-word;">
<div id="b" style="width:50px;height:50px;background:blue;"></div>
</div>
the script is :
$( "#b" ).draggable({ containment: 'parent' });
$('#a').click(function(e){
alert(e.pageX)
//return false;
})
i want to alert when i click the red div , not the blue div ,
the demo is here :http://jsfiddle.net/KwYjr/2/
thanks

Test the e.target for its ID.
Example: http://jsfiddle.net/patrick_dw/KwYjr/6/
$('#a').click(function(e){
if( e.target.id === 'a' ) {
alert(e.pageX);
}
//return false;
});
Another option would be to add a click handler to your #b element that calls e.stopPropagation(), but I wouldn't recommend it. There are better ways to go (like the one above) than to assign a handler just for the purpose of stopping propagation.
EDIT:
Another way to run the test above, would be to do a direct comparison of the elements, instead of using its ID:
Example: http://jsfiddle.net/patrick_dw/KwYjr/8/
if( e.target === this ) {
alert(e.pageX);
}

If you use event.stopPropagation() like this it works:
$( "#b" ).draggable({ containment: 'parent' }).click(function(e){ e.stopPropagation(); });
$('#a').click(function(e){
alert(e.pageX);
})

use
event.preventDefault()
http://api.jquery.com/event.preventDefault/

e.preventDefault();
e.stopPropagate();