JQuery fügt Zeile zu Tabelle hinzu und bindet Ereignis nur an letzten Eintrag

Ich versuche, eine Kopie eines Auswahlmenüs am Ende einer Tabelle anzuhängen, wenn im letzten Auswahlmenü in der Liste eine Auswahl getroffen wird. An dieser Stelle möchte ich das Verhalten nur auf das letzte Auswahlmenü in der Tabelle anwenden. Der folgende Code fügt die Zeile in die Tabelle ein, kann die Aktion jedoch nicht erfolgreich lösen. Daher zeigt das erste Auswahlmenü weiterhin das Verhalten an, auch wenn die Aktion nicht mehr aktiv ist.JQuery fügt Zeile zu Tabelle hinzu und bindet Ereignis nur an letzten Eintrag

Javascript:

var selectRow; 
$(document).ready(function() { 
    selectRow = $('#selectWrapper').html(); 
    rebindLastSelectBox(); 
}); 

function rebindLastSelectBox() { 
    $('#selectList:last').change(function(e) {   
       $(this).unbind('change'); 
     $('table').append("<tr id='selectWrapper'>" + selectRow + "</tr>"); 
       rebindLastSelectBox(); 
    }); 
};

HTML:

<head> 
    <title>JS Test</title> 
    <script src="./js/jquery.js" type="text/javascript" charset="utf-8"></script> 
    <script src="./js/application.js" type="text/javascript" charset="utf-8"></script> 
</head> 
<body> 

<table> 
    <tr> 
     <td>Title</td><td><input type="text" name="some_name" value="" id="some_name"></td> 
    </tr> 
    <tr id='selectWrapper'> 
     <td>Items</td><td><select name="items[]" id="selectList" size="1"> 
      <option value="1">Item 1</option> 
      <option value="2">Item 2</option> 
     </select></td> 
    </tr> 
</table> 
</body>

Alle Vorschläge dankbar empfangen!

Adam

Quelle

2009-08-20 apchester

Ich bin ehrlich gesagt nicht wirklich sicher, was mit Ihrem Code los ist. Wie kann "#selectList: last" irgendeine Bedeutung haben? Wie kannst du eine "letzte" ID haben? –

er kopiert die Zeile, so wird zwei IDs haben, die natürlich nicht gültig ist – redsquare

aktualisiert adam ... siehe meine Antwort – redsquare

Um Sie auf der tr und die Auswahl des ids Klassen ändern arbeitet nur. Die js können verbessert werden, aber Sie arbeiten zuerst.

<head> 
    <title>JS Test</title> 
    <script src="./js/jquery.js" type="text/javascript" charset="utf-8"></script> 
    <script src="./js/application.js" type="text/javascript" charset="utf-8"></script> 
</head> 
<body> 

<table> 
    <tr> 
     <td>Title</td><td><input type="text" name="some_name" value="" id="some_name"></td> 
    </tr> 
    <tr class='selectWrapper'>  
     <td>Items</td><td><select name="items[]" class="selectList" size="1"> 
       <option value="1">Item 1</option> 
       <option value="2">Item 2</option> 
     </select></td> 
    </tr> 
</table> 
</body> 

var selectRow; 
$(document).ready(function() { 
    selectRow = $('tr.selectWrapper').html(); 
    rebindLastSelectBox(); 
}); 

function rebindLastSelectBox() { 
    $('select.selectList:last').change(function(e) {     
     $(this).unbind('change'); 
     $('table').append("<tr class='selectWrapper'>" + selectRow + "</tr>"); 
     rebindLastSelectBox(); 
    }); 
};

Quelle

2009-08-20 20:34:24 redsquare

Danke für den Zeiger auf den Wechsel zu Klassen eher diese IDs. Nach dem Ändern meiner IDs sehe ich jedoch keine dynamische Aktualisierung der Seite. Es würde mich interessieren zu sehen, wie Sie das Javascript auch verbessern würden. Cheers, Adam – apchester

arbeitet für mich hier http://pastebin.me/f576b606b1bbc67794a9c8e8dcda9330 – redsquare

JQuery fügt Zeile zu Tabelle hinzu und bindet Ereignis nur an letzten Eintrag

Antwort

Verwandte Themen