[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]

I znowu nie zupełnie.
Ta inkrementacja jest oczekiwana.
Indeks 1 przypada dla wiersza który jest jest już w tabeli approvalLine.

[PHP] pobierz, plaintext 
<table id="approvalLine">
                        <thead>
                            <tr>
                                <td>
                                    <select name="departments_1">
                                        <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="#" id="addDepartmentLine"><img border="0" src="images/plus.png"></a>
                               </td>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
[PHP] pobierz, plaintext 

Różni się od szablonu.

Przeanalizuj proszę całość.

Ten post edytował korro 17.03.2009, 20:03:47