jquery - 使用 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);
           }
        } );
      });