[jquery] dynamiczny formularz i focus() Opcje

[daggoth]

Witajcie drodzy pehapowicze (IMG:style_emoticons/default/smile.gif)
Raczkuję w temacie jQuery więc zwracam się do was z prośbą o pomoc.

Wymarzyło mi się, aby gdy użytkownik kliknie w ostatniego selecta by coś wklupać, zaraz pod nim wskoczy nowy select i tak w nieskończoność (IMG:style_emoticons/default/smile.gif)
Znalazłem coś w interneciku i przerobiłem pod metodę focus(). Działa ale tylko na pierwszym selekcie (tak jakby ciągle stał na jednej wartości) Ma ktoś jakiś pomysł (IMG:style_emoticons/default/questionmark.gif)

Kod

[PHP] pobierz, plaintext 
 
<div class="container">
	<div class="row">
		<input type="text" id="count" name="count" value="1" />
        <div class="control-group" id="fields">
            <label class="control-label" for="field1">Nice Multiple Form Fields</label>
            <div class="controls" id="profs"> 
                <div class="input-append">
                    <input autocomplete="off" class="span3" id="field1" name="prof1" type="text" placeholder="Type something (it has typeahead too)" data-provide="typeahead" data-items="8" data-source='["Aardvark","Beatlejuice","Capricorn","Deathmaul","Epic"]'/><button id="b1" class="btn btn-info add-more" type="button">+</button>
                </div>
            <br>
            <small>Press + to add another form field :)</small>
            </div>
        </div>
	</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script>
$(document).ready(function(){
    var next = 1;
    $("#field"+next).focus(function(e){
        e.preventDefault();
        var addto = "#field" + next;
        next = next + 1;
        var newIn = '<br /><br /><input autocomplete="off" class="span3" id="field' + next + '" name="field' + next + '" type="text" data-provide="typeahead" data-items="8">';
        var newInput = $(newIn);
        $(addto).after(newInput);
        $("#field" + next).attr('data-source',$(addto).attr('data-source'));
        $("#count").val(next);  
    });
});
 
</script>
[PHP] pobierz, plaintext 

Edit:
Późna pora, zapomniałem linka:
tu to działa (IMG:style_emoticons/default/smile.gif)

http://jsbin.com/EBUMoKa/1/

Ten post edytował daggoth 20.01.2014, 23:38:52

[vonski]

Dobrze kombinujesz, ale to nie będzie działać, bo:

[HTML] pobierz, plaintext 
$("#field"+next).focus(function(e)
[HTML] pobierz, plaintext 

rejestruje handler tylko dla #field1.

Zamiast tego musisz mieć jakąś klasę która będzie wskazywała input który po kliknięciu ma generować kolejny input (tak przynajmniej zrozumiałem Twoje intencje). Powiedzmy, że klasa nazywać się będzie "trigger".
Druga rzecz, że z racji tego, że inputy są dodawane dynamicznie, sama funkcja focus() nie wystarczy - należy użyć w tym wypadku funkcji on().
Coś w tym rodzaju:

[PHP] pobierz, plaintext 
    $('.container').on('focus', '.trigger', function(e) { // on() zamiast focus()
        e.preventDefault();
        $(this).removeClass('trigger'); // usuwasz klasę tigger z aktualnie ostatniego inputa, bo po dodaniu kolejnego, ten juz nie będzie ostatni :)
        var addto = "#field" + next;
        next = next + 1;
 
        // dodajesz nowy input z klasą trigger i teraz to ten będzie pełnił rolę "wyzwalacza"
        var newIn = '<br /><br /><input class="trigger" autocomplete="off" class="span3" id="field' + next + '" name="field' + next + '" type="text" data-provide="typeahead" data-items="8">';
        var newInput = $(newIn);
        $(addto).after(newInput);
        $("#field" + next).attr('data-source',$(addto).attr('data-source'));
        $("#count").val(next);  
    });
[PHP] pobierz, plaintext 

[daggoth]

Super, o to chodziło (IMG:style_emoticons/default/smile.gif) Wielkie dzięki (IMG:style_emoticons/default/smile.gif)

Zastanawiam się, gdzie mogę poczytać o zachowaniu samego jQuery (handlery etc), jakieś praktyczne cechy. Składnie i manipulacje DOM już poniekąd rozumiem, brakuje mi właśnie takiej wiedzy (IMG:style_emoticons/default/smile.gif) Można prosić o jakieś wsparcie tutorialami albo innym zbiorem wiedzy? (IMG:style_emoticons/default/smile.gif)

[vonski]

Ten kurs jest moim zdaniem bardzo dobry na początek: http://ferrante.pl/frontend/javascript/jquery-to-latwe-1/
A jak już masz podstawy jQuery (i oczywiście podstawy JS) to wydaje mi się, że najlepiej się to pojmuje w sposób praktyczny.
Tzn. wymyśl sobie jakiś problem, powiedzmy na początek system komentarzy w AJAX, a potem spróbuj to po prostu zrobić.
Takie było przynajmniej moje podejście do tego tematu (IMG:style_emoticons/default/smile.gif)

Edit:
Z drugiej strony ten kurs Ferrante na pewno BYŁ bardzo dobry parę lat temu, a wiadomo że teraz wyszło kilka nowych wersji jQuery... ale być może do złapania podstaw będzie ok.

Ten post edytował vonski 21.01.2014, 00:25:49

[L0k0]

Ten kurs jest moim zdaniem bardzo dobry na początek: http://ferrante.pl/frontend/javascript/jquery-to-latwe-1/

Przerabiałem ten kurs i jest on trochę podstarzały. Wiele rzeczy zostało zdeprecjonowanych (bind itp.) Chyba nie do końca warto wracać do tego.

Ja polecam:

http://try.jquery.com/
http://www.codecademy.com/tracks/jquery
https://www.codeschool.com/courses/try-jquery

Pozdrawiam!

[daggoth]

Panowie, bardzo dziękuję za porady (IMG:style_emoticons/default/smile.gif) W wolnej chwili jak skończę projekt się za to zabiorę.

Bless i zapraszam na browara do Wadowic (IMG:style_emoticons/default/smile.gif)