| Autor |
Nachricht |
Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: 
|
Verfasst Mi 28.09.2011 09:43
Titel [jQuery] - Formular ein- bzw ausblenden |
  |
|
Hallo zusammen,
ich habe hier ein wenig jQuery welches ein Formularfeld mittels CSS Transition einblenden soll und Buttons ersetzen soll. Wenn man auf bestimmte Bereich der Oberfläche klickt soll das Formular wieder zu seinem Normalzustand wechseln.
Soweit funktioniert das auch ganz gut. Nur nachdem ich wieder den Normalzustand erreicht habe, dann lässt sich der Selektor '#show_form' nicht mehr klicken. Dh es passiert nichts. Hat mir jemand eine Idee wie ich das lösen kann?
| Code: |
$(document).ready(function(){
var check = 0;
$('#show_form').click(function(){
$(this).remove();
var submit_btn = '<input type="submit" id="send_form" class="btn-icon search">';
$('#searchform').addClass('highlight').append(submit_btn);
$('#searchform #search_word').css({
'-webkit-transition' : 'width 1s ease-out',
'width' : '150px'
});
check = 1;
console.log(this);
});
$('#table, .dl_bar').click(function(){
if (check == 1) {
var btn = '<div class="btn-icon search" id="show_form"></div>';
$('#send_form').remove();
$('#searchform #search_word').css({
'-webkit-transition' : 'width 1s ease-in',
'width' : '1px'
});
$('#searchform').css({
'-webkit-transition' : 'background 1s ease-out',
'background' : 'none'
});
$('#searchform').append(btn).removeClass('highlight');
console.log(this);
console.log('click');
console.log(btn);
}
check = 0;
});});
|
HTML
| Code: | <form id="searchform" method="post" >
<input type="text" id="search_word">
<div class="btn-icon search" id="show_form"></div>
</form> |
|
|
| |
  |
 |
snuwie
Dabei seit: 06.07.2010
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 28.09.2011 09:56
Titel
|
|
|
Dadurch, dass du den Button "removest" und wieder hinzufügst kann jQuery mit den einfachen click event nicht mehr drauf zugreifen. Deswegen musst mit dem live Handler arbeiten. 
Zuletzt bearbeitet von snuwie am Mi 28.09.2011 10:00, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
fyll
Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht:
|
Verfasst Mi 28.09.2011 10:02
Titel
|
|
|
|
Klick
|
|
| |
|
|
Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Mi 28.09.2011 10:13
Titel
|
|
|
Danke. Ja das war das Problem.
Habe es so umgeschrieben
| Code: | var check = 0;
$('#show_form').click(function(){
$(this).css('display','none');
var submit_btn = '<input type="submit" id="send_form" class="btn-icon search">';
$('#searchform').css('background','#fff').append(submit_btn);
$('#searchform #search_word').css({
'-webkit-transition' : 'width 1s ease-out',
'width' : '150px'
});
check = 1;
console.log(this);
});
$('#table, .dl_bar').click(function(){
if (check == 1) {
$('#send_form').remove();
$('#searchform #search_word').css({
'-webkit-transition' : 'width 1s ease-in',
'width' : '1px'
});
$('#searchform').css({
'-webkit-transition' : 'background 1s ease-out',
'background' : 'none'
});
$('#searchform').removeClass('highlight');
$('#show_form').css('display','block');
console.log(this);
console.log('click');
}
check = 0;
}); |
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Div's ein- und ausblenden mit jquery o.ä.
jQuery - div's einblenden - aber nicht ausblenden nur ersetz
[AJAX] jQuery Post-Formular
jquery - hide content in jquery object
jQuery Plugin - Slider als Input wie in jQuery UI
Div ein und ausblenden
|
|
Willkommen auf dem Portal für Mediengestalter
