mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 13.04.2021 08:25 Benutzername: Passwort: Auto-Login

Thema: [jQuery] - Formular ein- bzw ausblenden vom 28.09.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> [jQuery] - Formular ein- bzw ausblenden
Autor Nachricht
Kash
Threadersteller

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 38
Geschlecht: Männlich
Verfasst Mi 28.09.2011 09:43
Titel

[jQuery] - Formular ein- bzw ausblenden

Antworten mit Zitat Zum Seitenanfang

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>
  View user's profile Private Nachricht senden
snuwie

Dabei seit: 06.07.2010
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 28.09.2011 09:56
Titel

Antworten mit Zitat Zum Seitenanfang

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. Lächel

Zuletzt bearbeitet von snuwie am Mi 28.09.2011 10:00, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
fyll

Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 36
Geschlecht: Männlich
Verfasst Mi 28.09.2011 10:02
Titel

Antworten mit Zitat Zum Seitenanfang

Klick
  View user's profile Private Nachricht senden
Kash
Threadersteller

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 38
Geschlecht: Männlich
Verfasst Mi 28.09.2011 10:13
Titel

Antworten mit Zitat Zum Seitenanfang

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;
            });
  View user's profile Private Nachricht senden
 
Ähnliche Themen Div's ein- und ausblenden mit jquery o.ä.
jQuery - div's einblenden - aber nicht ausblenden nur ersetz
[AJAX] jQuery Post-Formular
jQuery Plugin - Slider als Input wie in jQuery UI
jquery - hide content in jquery object
Layer ausblenden?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.