jQuery blur() e fare clic su()

Question

Ho le seguenti funzioni jQuery:

1) invia il modulo

$(".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) Ingrandire il modulo e visualizzare il pulsante di ingresso

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

3) Rende la textarea più piccola e nasconde il pulsante

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

Questo accade quando cerco di fare una voce:

• Fare clic sul campo (evento di messa a fuoco), il campo si allarga e mostra il pulsante di immissione
• Inserire il testo
• Fare clic sul pulsante di entrata prima tempo: Ora l'evento sfocatura incendi wich rende il campo più piccolo di nuovo, ma l'evento click non viene generato
• Se si fa clic sul pulsante di nuovo il modulo non presentare

Penso che questo significhi che la sfocatura e l'evento click interferiscano l'uno con l'altro?

È possibile trovare un violino del problema here. Quando si preme il pulsante con il campo focalizzato, sfoca il campo ma non lo inserisce. Quando si preme il pulsante con il campo sfocato, la voce viene inviata.

Qualche idea?

Grazie in anticipo!

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; 
}); 

e mantenere l'attenzione e la funzione sfocatura come prima.

thanks. 

Answer 2

Sembra modificare l'altezza e costringendo un riflusso annulla l'evento click. Le soluzioni più semplici sono utilizzare mousedown anziché fare clic (si attiva prima della sfocatura) o eseguire il wrapping della modifica css in un setTimeout.

Answer 3

Il problema è che click si attiva sul pulsante mouseup, tuttavia quando si modifica l'altezza, si passa a dove il mouse non si trova più sul pulsante quando si verifica mouseup. Utilizzare mousedown invece di click e poi trigger('blur') sul textarea per fare entrambi gli eventi accadono.

Nota: è ancora necessario un evento click lì solo così è possibile return false annullare le funzioni di invio modulo predefinito.

fiddle

Answer 4

Qui il problema è l'evento blur, che lavora più velocemente di quanto l'evento click. Ecco perché rende il campo più piccolo invece di inviare prima il modulo.

avete solo bisogno di cambiare la prima linea click-mousedown:

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

Oppure:

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

Answer 5

mi sono trovato comodo da usare http://api.jquery.com/unbind/