表單元素不會插入正確的jquery移動設計

我使用jquery構建了一個表單。一旦我使用$（'＃Form'）。append（''）;當我使用PHP插入它們時，新添加的元素不是主題/看起來不像我想的那樣。表單元素不會插入正確的jquery移動設計

要清楚：

PHP補充道：jQuery Mobile的樣式

jQuery的動態地補充道：正規形風格。

我該怎麼買通這個？

====== ADDON ====== 好吧，這裏是代碼

此功能增加了塊：

function addItem(section){ 
    if(itemcounter[section]>1){ 
     $('table#deductionItemContent'+section+' tr:last').after('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'1"></tr>'); 
     $('table#deductionItemContent'+section+' tr:last').after('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'2"></tr>'); 
     $('table#deductionItemContent'+section+' tr:last').after('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'3"></tr>'); 
    }else{ 
     $('#deductionItemContent'+section).append('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'1"></tr>'); 
     $('#deductionItemContent'+section).append('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'2"></tr>'); 
     $('#deductionItemContent'+section).append('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'3"></tr>'); 
    } 

    $('#deductionItemContent'+section).append('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'1"></tr>'); 
    $('#deductionItemContent'+section).append('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'2"></tr>'); 
    $('#deductionItemContent'+section).append('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'3"></tr>'); 
    $('#deductionItemContentRow'+section+'_'+itemcounter[section]+'1').append('<td id="deductionItemContent'+section+'El'+itemcounter[section]+'"></td>'); 
    $('#deductionItemContent'+section+'El'+itemcounter[section]).append('<div class="type-select"><label for="nu_item_'+section+'_'+itemcounter[section]+'">{/literal}{translate text="application_reports_plate5_item"}{literal}'+itemcounter[section]+'</label><select onchange="updateForm('+section+');" id="nu_item_'+section+'_'+itemcounter[section]+'" name="nu_item_'+section+'_'+itemcounter[section]+'"></select></div>') 
    $('#nu_item_'+section+'_'+itemcounter[section]).append('<option value="main">{/literal}{translate text="application_reports_plate5_item_main"}{literal}</option>'); 
    $('#nu_item_'+section+'_'+itemcounter[section]).append('<option value="aux">{/literal}{translate text="application_reports_plate5_item_aux"}{literal}</option>'); 
    $('#nu_item_'+section+'_'+itemcounter[section]).append('<option value="jib">{/literal}{translate text="application_reports_plate5_jib"}{literal}</option>'); 
    $('#nu_item_'+section+'_'+itemcounter[section]).append('<option value="rope">{/literal}{translate text="application_reports_plate5_rope"}{literal}</option>'); 
    $('#nu_item_'+section+'_'+itemcounter[section]).append('<option value="underhookdevice">{/literal}{translate text="application_reports_plate5_underhookdevice"}{literal}</option>'); 
    $('#nu_item_'+section+'_'+itemcounter[section]).append('<option value="rigging">{/literal}{translate text="application_reports_plate5_rigging"}{literal}</option>'); 
    $('#nu_item_'+section+'_'+itemcounter[section]).append('<option value="none">{/literal}{translate text="application_reports_plate5_none"}{literal}</option>'); 
    $('#deductionItemContentRow'+section+'_'+itemcounter[section]+'2').append('<td id="deductionItemContent'+section+'E2'+itemcounter[section]+'"></td>'); 
    $('#deductionItemContent'+section+'E2'+itemcounter[section]).append('<div class="type-select"><label for="nu_status_'+section+'_'+itemcounter[section]+'">{/literal}{translate text="application_reports_plate5_itemstatus"}{literal} '+'</label><select onchange="updateForm('+section+');" id="nu_status_'+section+'_'+itemcounter[section]+'" name="nu_status_'+section+'_'+itemcounter[section]+'"></select></div>') 
    $('#nu_status_'+section+'_'+itemcounter[section]).append('<option value="stowed">{/literal}{translate text="application_reports_plate5_item_stowed"}{literal}</option>'); 
    $('#nu_status_'+section+'_'+itemcounter[section]).append('<option value="erected">{/literal}{translate text="application_reports_plate5_item_erected"}{literal}</option>'); 
    $('#nu_status_'+section+'_'+itemcounter[section]).append('<option value="inservice">{/literal}{translate text="application_reports_plate5_item_inservice"}{literal}</option>'); 
    $('#nu_status_'+section+'_'+itemcounter[section]).append('<option value="none">{/literal}{translate text="application_reports_plate5_none"}{literal}</option>'); 
    $('#deductionItemContentRow'+section+'_'+itemcounter[section]+'3').append('<td id="deductionItemContent'+section+'E3'+itemcounter[section]+'"></td>'); 
    $('#deductionItemContent'+section+'E3'+itemcounter[section]).append('<div class="type-text"><label for="nu_deduction_'+section+'_'+itemcounter[section]+'">{/literal}{translate text="application_reports_plate5_deduction"}{literal}</label><input onkeyup="updateForm('+section+');" type="text" length="6" maxlength="6" id="nu_deduction_'+section+'_'+itemcounter[section]+'" name="nu_deduction_'+section+'_'+itemcounter[section]+'" /></div>'); 
    /** 
    * Add Data to page 3 
    */ 
    $('#weightMasterDataTable'+section).append('<tr id="weightMasterDataTableRow'+section+itemcounter[section]+'"></tr>'); 
    $('#weightMasterDataTableRow'+section+itemcounter[section]).append('<td id="weightMasterDataTableContent'+section+itemcounter[section]+'1"></td>'); 
    $('#weightMasterDataTableRow'+section+itemcounter[section]).append('<td id="weightMasterDataTableContent'+section+itemcounter[section]+'2"></td>'); 
    $('#weightMasterDataTableRow'+section+itemcounter[section]).append('<td id="weightMasterDataTableContent'+section+itemcounter[section]+'3">0</td>'); 
    $('#weightMasterDataTableRow'+section+itemcounter[section]).append('<td id="weightMasterDataTableContent'+section+itemcounter[section]+'4">0</td>'); 
    $('#weightMasterDataTableRow'+section+itemcounter[section]).append('<td id="weightMasterDataTableContent'+section+itemcounter[section]+'5">0</td>'); 
    /** 
    * Add Radio Buttons 
    */ 
    $('#weightMasterDataButtons'+section).append('<input type="radio" name="nu_masterbutton_'+section+'" id="nu_masterbutton_'+section+'_'+itemcounter[section]+'" value="'+itemcounter[section]+'" /><label for="nu_masterbutton_'+section+'_'+itemcounter[section]+'" >&nbsp;&nbsp;{/literal}{translate text="application_reports_plate5_item"}{literal} '+itemcounter[section]+'</label>'); 
    $('#weightMasterDataButtons'+section).append('<br />'); 
    /** 
    * in the end update counter 
    */ 
    itemcounter[section]++; 
}

屬於該HTML代碼看起來是這樣的：

<tr> 
    <td> 
     <div id="tabs-2"> 
      <h4>deductions for loadtest 1</h4> 
      <div id="deductions1"> 
       <a onclick="addItem(1);">+ Add item to deduction</a> 
       <table id="deductionMaster1" class="tablecloth" width="100%" cellspacing="0" cellpadding="0" border="0"> 
        <tbody> 
         <tr id="deductionMasterRow11"> 
          <td> 
           <table id="deductionItemContent1" class="tablecloth" width="100%" cellspacing="0" cellpadding="0" border="0"></table> 
          </td> 
         </tr> 
         <tr id="deductionMasterRow12"> 
          <td id="deductionMasterElement12"> 
          total: 
          <b id="deductionValue1">0</b> 
          lbs 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
     </div> 
    </td> 
</tr>

這只是表格的一小部分，因爲一切都以同樣的方式反應。我想我需要告訴瀏覽器一些插入的表單元素是jQuery風格的主題。但我不知道如何。

來源

2012-11-17 Chris West

雖然我確定您確定您的代碼是正確的，但請將其張貼在此處，以便我們不必查看一百萬個可能的問題，試圖給您一個答案 –

更新是 –

我知道我帶走了有點複雜的方式，但這只是第一個版本。我必須重做很多東西，但首先我需要它在工作狀態^^ –

嘗試增加

$('select').selectmenu();

在jQuery腳本結束。這應該處理<選擇>標籤。如果這是成功的，請參閱jquery mobile的文檔，瞭解如何處理您想要的頁面上的任何其他表單元素。

來源

2012-11-18 00:22:18

謝謝，這有助於很多。我無法轉換的唯一部分是輸入字段。我設置類來解決它。 –

表單元素不會插入正確的jquery移動設計

回答

相關問題