[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

[erix]

Zmienna utworzona z var wewnątrz funkcji, to zmienna lokalna.

Kod

$("#deleteDepartmentLine_" + r).click(function(){

Funkcja wywoływana z kontekstu click nie widzi zmiennej lokalnej dla funkcji; tylko globalne.