[JQuery] Wytłumaczcie mi dlaczego to działa w ten sposób. Opcje

[korro]

Witam.
Robię dynamiczny formularz z użyciem JQuery.
Kod wygląda tak:
Szablon HTML:

[PHP] pobierz, plaintext 
<textarea style="display:none" id="departments">
    <tr id="departments_tr_{0}">
        <td>{0}
            <select name="departments_{0}">
                <option value="">[choose department]</option>
                <?php
                $depts = $db->getDepartments();
                foreach ($depts as $depts_row) {
                    echo '<option value="'.$depts_row[0].'">'.$depts_row[1].'</option>'."\n";
                }
                ?>
           </select>
        </td>
        <td>
            <a href="#" ><img id="deleteDepartmentLine_{0}" border="0" src="images/minus.png"></a>
        </td>
   </tr>
</textarea>
[PHP] pobierz, plaintext 

Niedziałający kod JS:

[PHP] pobierz, plaintext 
<?php
var templateDepartments = jQuery.format($("#departments").val());
        var depts_id = 1;
        function addDepartment() {
            depts_id++;
            $(templateDepartments(depts_id)).appendTo("#approvalLine tbody");
            $("#deleteDepartmentLine_" + depts_id).click(function(){
                $("#departments_tr_" +  depts_id).remove();
            });
           
        }
        $("#addDepartmentLine").click(addDepartment);
?>
[PHP] pobierz, plaintext 

Działający kod JS:

[PHP] pobierz, plaintext 
<?php
var templateDepartments = jQuery.format($("#departments").val());
        var depts_id = 1;
        function addDepartment() {
            var r = depts_id++;
            $(templateDepartments(r)).appendTo("#approvalLine tbody");
            $("#deleteDepartmentLine_" + r).click(function(){
                $("#departments_tr_" +  r).remove();
            });
           
        }
        $("#addDepartmentLine").click(addDepartment);
?>
[PHP] pobierz, plaintext 

Różnica polega na tym, że przepisuję zmienną i do zdarzeń używam przepisanej.
Pisząc 'nie działa' mam na myśli to, że wartość depts_id nie jest doklejana do nazwy elementu w momencie deklaracji, tylko w momencie zdarzenia.
Czyli: klikając na dowolny guzik minus usunie się tylko ostatnio wstawiony wiersz.

Z góry dzięki za pomysły.

Ten post edytował korro 17.03.2009, 18:27:15

[korro]

Niezupełnie.
Ten przykład z var r działa w oczekiwany sposób.

W pierwszym przykładzie tak jak napisałem wcześniej.
Wygląda na to, że dla każdego

[PHP] pobierz, plaintext 
<?php
$("#departments_tr_" +  depts_id).remove();
?>
[PHP] pobierz, plaintext 

selektor jest równy maksymalnej wartości depts_id.

Ten post edytował korro 17.03.2009, 19:41:45

[dr_bonzo]

Niezupełnie.
Ten przykład z var r działa w oczekiwany sposób.

W pierwszym przykładzie tak jak napisałem wcześniej.
Wygląda na to, że dla każdego

[PHP] pobierz, plaintext 
<?php
$("#departments_tr_" +  depts_id).remove();
?>
[PHP] pobierz, plaintext 

selektor jest równy maksymalnej wartości depts_id.

1. powcinaj kod prawidlowo - nie wprowadza wtedy tyle zamieszania
2.

[PHP] pobierz, plaintext 
<?php
var templateDepartments = jQuery.format($("#departments").val());
var depts_id = 1; // zmienna globalna
function addDepartment() { 
   depts_id++; // zmienna globalna
   $(templateDepartments(depts_id)).appendTo("#approvalLine tbody");
   $("#deleteDepartmentLine_" + depts_id).click(function(){
// tworzysz fukcje == tworzy sie domkniecie, tzn 'depts_id' to to samo co zmienna globalna..
       $("#departments_tr_" +  depts_id).remove(); // ... wartosc depts_id jest wczytywana w momencie wykonywania tej linijki
// czyli dodasz kilka departametnow => depts_id bedzie powiedzmy 5, i depts_id wewnatrz tej funkcji odwoluje sie do tej samej zmiennej czyli tez ma wartosc 5
// zrobienie: var r = depts_id wewnatrz addDepartment() tworzy zmienna lokalna, dalej: handler click() laczy sie znowu z ta zmienna, ale tym 
// razem ona jest lokalna i zostanie usunieta (wewnatrz handlera pozostanie nietknieta) wraz z koncem funkcji addDepartment(), jako ze nie 
// jest globalna i nigdzie indziej jej nie modyfikujesz to wszytko jest ok
   });
  
}
$("#addDepartmentLine").click(addDepartment);
?>
[PHP] pobierz, plaintext