flou jQuery() et cliquez sur()

Question

Je les fonctions jQuery suivantes:

1) Soumet la forme

$(".content").delegate('.entryButton','click', function() { 
     var form = $(this).closest("form"); 
     var id = form.attr('id'); 
     var text = form.find("textarea").val(); 
     Sijax.request('add_entry', [id, text]); 

     //Prevent the form from being submitted (default HTML) 
     return false; 
    }); 

2) Agrandir le formulaire et afficher le bouton d'entrée

$("textarea").focus(function() { 
     $(this).css('height', '80px'); 
     var button = $(this).parent().next().children(); 
     button.css('visibility', 'visible'); 
     button.css('height', '20px') 
    }); 

3) Rend la zone de texte plus petite et cache le bouton

$("textarea").blur(function() { 
     $(this).css('height', '30px'); 
     var button = $(this).parent().next().children(); 
     button.css('height', '0px') 
    }); 

Cela se produit lorsque je tente de faire une entrée:

• Cliquez dans le champ (événement de mise au point), le champ grossit et montre le bouton d'entrée
• Entrez le texte
• Cliquez sur le bouton d'entrée premier temps: maintenant, le feu événement flou wich rend le champ plus petit, mais encore une fois l'événement click ne se déclenche pas
• Si je clique sur le bouton à nouveau le formulaire ne présente

Je pense que cela signifie que le flou et le clic interfèrent les uns avec les autres?

Vous pouvez trouver un violon du problème here. Lorsque vous appuyez sur le bouton avec le champ focalisé, il estompe le champ mais ne l'entre pas. Lorsque vous appuyez sur le bouton avec le champ flou, l'entrée est soumise.

Des idées?

Merci d'avance!

Answer 1

$('.entryButton').on('click', function (e) { 
    return false; // to prevent default form post 
}); 
$("form").delegate('.entryButton','mousedown', function() { 
    $('textarea').trigger('blur'); 
    var form = $(this).closest("form"); 
    var id = form.attr('id'); 
    var text = form.find("textarea").val(); 
    $("#test").append(text);     

    //Prevent the form from being submitted (default HTML) 
    return false; 
}); 

et de garder la mise au point et la fonction de flou comme avant.

thanks. 

Answer 2

Cela ressemble à changer la hauteur et forcer une refusion annule l'événement de clic. Les solutions les plus simples sont soit d'utiliser mousedown plutôt que de cliquer (il se déclenche avant le flou) ou d'envelopper le changement de css dans un setTimeout.

Answer 3

Votre problème est que click se déclenche sur le bouton mouseup, mais lorsque vous modifiez la hauteur, cela se produit à l'endroit où votre souris n'est plus sur le bouton lorsque le mouseup se produit. Utilisez mousedown au lieu de click puis trigger('blur') sur le textarea pour que les deux événements se produisent.

Remarque: vous avez toujours besoin d'un événement click pour pouvoir annuler les fonctions de soumission de formulaire par défaut en utilisant return false.

fiddle

Answer 4

Ici, le problème est l'événement blur, qui fonctionne plus rapidement que l'événement click. C'est pourquoi il réduit le champ au lieu de soumettre le formulaire en premier.

Il vous suffit de changer la première ligne click-mousedown:

$(".content").delegate('.entryButton','mousedown', function() { 
// your code 
}); 

Ou:

$(".content").bind('mousedown', function() { 
// your code 
}); 

Answer 5

Je me suis trouvé confortable à utiliser http://api.jquery.com/unbind/