jQuery在表行克隆后的更改上動態更改文本框值

Question

我有一種用於創建交互式設計的復雜的php，html腳本。 我正在使用重復表，並且我基本上是在克隆特定表行的內容並將其附加到表的末尾。 當我在選擇菜單中選擇某個選項時，相應的文本字段將使用正確的值進行更新。 但是克隆的行行為不當

我要問的是是否有一種方法可以使此字段也更改值。 這是用於添加/克隆行的各種代碼。 請注意，ID詳細信息是表格行的ID

$("#addrow1").click(function(){
        //alert("It works");

        //$('#description tr:last').after('<tr>...</tr>');
        $('#details').clone().appendTo('#dailyexpense');    


            });

用於更改文本字段和文本框值的代碼

$("#cities").live('change',function(){
var cityrates = $("#cities :selected").val();
var brkfstrates = (0.2 * cityrates).toFixed(1); 
$("#brkfasttxt").val(brkfstrates);
$("#brkfastchk").val(brkfstrates);
var lunchrates = (0.3 * cityrates).toFixed(1);
$("#lunchtxt").val(lunchrates);
$("#lunchchk").val(lunchrates);
var dinnerrates = (0.3 * cityrates).toFixed(1);
$("#dinnertxt").val(dinnerrates);
$("#dinnerchk").val(dinnerrates);
var incdntlrates = (0.2 * cityrates).toFixed(1);
$("#incidentltxt").val(incdntlrates);
$("#incidentlchk").val(incdntlrates);
});

我的表格行代碼由瀏覽器加載

<tr id="details">
      <td><label for="date"></label>
      <input style="background-color:#CCC;" type="text" name="date" id="date" /></td>
      <td><label for="cities"></label>
        <select name="cities" id="cities" style="background-color:#CCC; width:220px;">
        <?php           
 foreach($country as $makassi1){
 $selectcities = "SELECT City, Country, Rate FROM perdiem_rates WHERE Country =   '$makassi1'";
 $checkcity = mysql_query($selectcities)or die(mysql_error());
 $countcities = mysql_num_rows($checkcity);

 while($row=mysql_fetch_assoc($checkcity))
 {

     $countries = ($row['Country']);
     $names =($row['City']) ;
     $rate =($row['Rate']) ;
     $ratess=$countries."-".$names
     ?> 

 <option id="cityoptrates"  value="<?php echo $rate; ?>"> 
 <?php echo $ratess; ?>
 </option>
 <?php       
 }
 }          
         ?>
      </select></td>
      <td><input name="brkfastchk" type="checkbox" class="chkbox"  id="brkfastchk" />
        <label for="brkfasttxt"></label>
        <input style="background-color:#CCC;" name="brkfasttxt" type="text" id="brkfasttxt" size="5" readonly="readonly" />
      <label for="brkfastchk"></label></td>
      <td><input type="checkbox" name="lunchchk"  id="lunchchk" class="chkbox" />
        <label for="lunchtxt"></label>
        <input style="background-color:#CCC;" name="lunchtxt" type="text" id="lunchtxt" size="5" readonly="readonly" />
      <label for="lunchchk"></label></td>
      <td><input type="checkbox" name="dinnerchk"  id="dinnerchk" class="chkbox" />
        <label for="dinnertxt"></label>
        <input style="background-color:#CCC;" name="dinnertxt" type="text" id="dinnertxt" size="5" readonly="readonly" />
      <label for="dinnerchk"></label></td>
      <td><input type="checkbox" name="incidentlchk"  id="incidentlchk" class="chkbox" />
        <label for="incidentltxt"></label>
        <input style="background-color:#CCC;" name="incidentltxt" type="text" id="incidentltxt" size="5" readonly="readonly" />
      <label for="incdntchk"></label></td>
      <td colspan="2"><label for="daily_totals"></label>
      <input style="background-color:#CCC;" name="daily_totals" type="text" id="daily_totals" size="5" /></td>
    </tr>

按照以上所述，我的textfield值更改代碼可與第一行初始完美配合。 克隆的行不起作用。 唯一適用於克隆行的是用於選擇城市的選擇菜單。 需要幫助。 歡迎提出建議和改進。

鏈接到jsfiddle中的實際代碼http://jsfiddle.net/NAafu/10/

Answer 1

就您而言，也許您還應該克隆事件：

 $('#details').clone(true).appendTo('#dailyexpense');   

如clone（）文檔中所述

編輯-問題可能是您使用的是ID選擇器（ $("#cities").live ），該選擇器僅返回一個元素。 ID在頁面上應該是唯一的，您應該改用類