使用jquery填充多列與選擇下拉列表

Question

當表最初創建時，該表的第一行有選擇塊中的類別列表，它使用底部顯示的jquery填充。

<tr> 
<td align="center"> 
<span id="catDisplay"> 
<select id="field1" name="field1"> 
    <option value="">--select--</option> 
    <option value="27">$5.00 off (CAT 27)</option> 
    <option value="52">$5.00 off Skip (CAT 52)</option> 
</select> 
</span> 
</td> 
<td align="left"> 
<button id="keywordAdd">+</button> 
</td> 
</tr> 

使用.insertafter（）添加第二行。但它似乎並沒有觸發相同的jQuery。

<tr> 
<td align="center"> 
<span id="catDisplay2">&nbsp;</span> 
</td> 
<td> 
<span id="prodDisplay2">&nbsp;</span> 
</td> 
<td align="left"> 
<button id="keywordAdd">+</button> 
<button id="keywordDelete">-</button> 
</td> 
</tr> 

這裏是jQuery的：

$('span').each(function(){ 
    if ($(this).attr('id').match(/catDisplay/)) { 
    $(this).load(
    'free_gift_backend.php', 
    { 
     query  : "getAllCats" 
    }); 
    } 
}); 

我也曾嘗試

$("span[id^=catDisplay]").load(
'free_gift_backend.php', 
{ 
    query  : "getAllCats" 
}, 
function(response, status, xhr) { 
    if (status != "error") { 
    $('#field1') 
     .change(changeCat); 
    } 
}); 

這也不起作用。我做錯了什麼？

這裏的行添加邏輯：

$("#keywordAdd").live("click", function(event) { 
    event.preventDefault(); 
    var rowCount = $("#keywordTable tbody>tr").length + 1; 
    // this should be the rowCount, but if someone has added 
    // after deleting from the middle, it will need to be changed. 
    while ($("#catDisplay" + rowCount).exists()) { 
     rowCount = rowCount + 1; 
    } 
    var html = keywordRow(rowCount); 
    $(html).insertAfter('#keywordTable tbody>tr:last'); 
    // $("#keywordTable tbody>tr #catDisplay" + rowCount).focus(); 
    var $newrow = $("#keywordTable tbody>tr #catDisplay" + rowCount); 
    $newrow.focus(); 
    $newrow.load(
    'free_gift_backend.php', 
    { 
     query  : "getAllCats", 
     rowCount : rowCount 
    } , 
    function(response, status, xhr) { 
     if (status != "error") { 
     $(this).children(0) 
      .change(changeCat); 
     } 
    }); 
    }); 

Answer 1

把「.load（）」調用在「.live（）」調用其中創建新行似乎是解決我的問題。我曾認爲span.each調用會起作用，但我想這對於動態添加行（？）不起作用。

$newrow.load(
     'free_gift_backend.php', 
     { 
      query  : "getAllCats", 
      rowCount : rowCount 
     } , 
     function(response, status, xhr) { 
      if (status != "error") { 
      $(this).children(0) 
       .change(changeCat); 
      } 
     }); 
     });