樣式不能在動態創建的單選按鈕中正確應用

我必須動態創建單選按鈕組。我能夠成功創建它。但問題是動態創建的單選按鈕看起來不像靜態按鈕。樣式不能在動態創建的單選按鈕中正確應用

我嘗試兩種方法： 1）上fieldset調用create - ui-corner-all類在內跨度並且作爲結果的所有無線電按鈕出現舍入被獲取添加。 2）在fieldset的div上調用create - 這裏問題比較好。但是仍然存在一些問題。首先，當只有單選按鈕時，ui-controlgroup-last類被添加到該單選按鈕。接下來，當第二個單選按鈕被添加時，ui-controlgroup-last類正在被添加到該單選按鈕。但ui-controlgroup-last仍然存在於第一個單選按鈕中，並且此循環重複。因此，所有單選按鈕都具有最後單選按鈕的樣式。

這是我的代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script> 
    <script> 
$(document).ready(function() 
{ 
    for (var i = 0; i < 3; i++) 
    { 
     $("#rgroup1").append('<input type="radio" name="rg1" id="radio1-'+i+'"/><label for="radio1-'+i+'">Value</label>'); 
     $("#rgroup1").trigger("create"); 

     $("#rgroup2").append('<input type="radio" name="rg2" id="radio2-'+i+'"/><label for="radio2-'+i+'">Value</label>'); 
     $("#radiodiv1").trigger("create"); 

    } 
}); 

    </script> 
</head> 

<body> 
    <div data-role="content"> 
    <h3>Normal radio buttons</h3> 
    <div id="radiodiv"> 
     <fieldset data-role="controlgroup" id="rgroup"> 
      <input type="radio" name="rg" id="radio-1"/><label for="radio-1">Value</label> 
      <input type="radio" name="rg" id="radio-2"/><label for="radio-2">Value</label> 
      <input type="radio" name="rg" id="radio-3"/><label for="radio-3">Value</label> 
     </fieldset> 
    </div> 
    <h3>Dynamically created-Div Refresh</h3> 
    <div id="radiodiv"> 
     <fieldset data-role="controlgroup" id="rgroup1"> 
     </fieldset> 
    </div> 
    <h3>Dynamically created-Fieldset Refresh</h3> 
    <div id="radiodiv1"> 
     <fieldset data-role="controlgroup" id="rgroup2"> 
     </fieldset> 
    </div> 
    </div> 
</body>

PS - 爲什麼我呼籲每個之後創建的原因追加是因爲多數民衆贊成它是如何工作的我的實際用例，只有一個單選按鈕在創建任何時候。

生成的源

<html lang="en" class="ui-mobile"><head><base href="http://localhost:8081/html5/calendar-new/radio_issue.html"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css"> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script> 
    <script> 
$(document).ready(function() 
{ 
    for (var i = 0; i < 3; i++) 
    { 
     $("#rgroup1").append('<input type="radio" name="rg1" id="radio1-'+i+'"/><label for="radio1-'+i+'">Value</label>'); 
     $("#rgroup1").trigger("create"); 

     $("#rgroup2").append('<input type="radio" name="rg2" id="radio2-'+i+'"/><label for="radio2-'+i+'">Value</label>'); 
     $("#radiodiv1").trigger("create"); 

    } 
}); 

    </script> 
<title></title></head> 

<body class="ui-mobile-viewport"><div data-role="page" data-url="/html5/calendar-new/radio_issue.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 933px; "> 
    <div data-role="content" class="ui-content" role="main"> 
    <h3>Normal radio buttons</h3> 
    <div id="radiodiv"> 
     <fieldset data-role="controlgroup" id="rgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical"> 
      <div class="ui-radio"><input type="radio" name="rg" id="radio-1"><label for="radio-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-top ui-btn-up-c"><span class="ui-btn-inner ui-corner-top"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div> 
      <div class="ui-radio"><input type="radio" name="rg" id="radio-2"><label for="radio-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div> 
      <div class="ui-radio"><input type="radio" name="rg" id="radio-3"><label for="radio-3" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c"><span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div> 
     </fieldset> 
    </div> 
    <h3>Dynamically created-Div Refresh</h3> 
    <div id="radiodiv"> 
     <fieldset data-role="controlgroup" id="rgroup1" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical"> 
     <div class="ui-radio"><input type="radio" name="rg1" id="radio1-0"><label for="radio1-0" data-theme="c" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-radio-off ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div><div class="ui-radio"><input type="radio" name="rg1" id="radio1-1"><label for="radio1-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-radio-off ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div><div class="ui-radio"><input type="radio" name="rg1" id="radio1-2"><label for="radio1-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-radio-off ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div></fieldset> 
    </div> 
    <h3>Dynamically created-Fieldset Refresh</h3> 
    <div id="radiodiv1"> 
     <fieldset data-role="controlgroup" id="rgroup2" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical"> 
     <div class="ui-radio"><input type="radio" name="rg2" id="radio2-0"><label for="radio2-0" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-top ui-corner-bottom ui-controlgroup-last ui-btn-up-c"><span class="ui-btn-inner ui-corner-top ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div><div class="ui-radio"><input type="radio" name="rg2" id="radio2-1"><label for="radio2-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c"><span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div><div class="ui-radio"><input type="radio" name="rg2" id="radio2-2"><label for="radio2-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c"><span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div></fieldset> 
    </div> 
    </div> 

</div><div class="ui-loader ui-body-a ui-corner-all" style="top: 290px; "><span class="ui-icon ui-icon-loading spin"></span><h1>loading</h1></div></body></html>

來源

2011-10-07 user700284

可否請您上傳渲染您在瀏覽器中查看的HTML –

我通過明確地去除所有標籤的ui-controlgroup-last和ui-corner-bottom類除標籤的最後一個單選按鈕

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script> 
    <script> 
$(document).ready(function() 
{ 
    for (var i = 0; i < 3; i++) 
    { 
     /*$("#rgroup1").append('<input type="radio" name="rg1" id="radio1-'+i+'"/><label id="label1-'+i+'" for="radio1-'+i+'">Value</label>'); 
     $("#rgroup1").trigger("create");*/ 


     $("#rgroup2").append('<input type="radio" name="rg2" id="radio2-'+i+'"/><label id="label2-'+i+'"for="radio2-'+i+'">Value</label>'); 
     $("#radiodiv1").trigger("create"); 


    } 
    for (var i = 0; i < 2; i++) 
    { 
     $('#label2-'+i).removeClass("ui-controlgroup-last ui-corner-bottom"); 
    } 
}); 

    </script> 
</head> 

<body> 
    <div data-role="content"> 
    <h3>Normal radio buttons</h3> 
    <div id="radiodiv"> 
     <fieldset data-role="controlgroup" id="rgroup"> 
      <input type="radio" name="rg" id="radio-1"/><label for="radio-1">Value</label> 
      <input type="radio" name="rg" id="radio-2"/><label for="radio-2">Value</label> 
      <input type="radio" name="rg" id="radio-3"/><label for="radio-3">Value</label> 
     </fieldset> 
    </div> 
    <!-- <h3>Dynamically created-Div Refresh</h3> 
    <div id="radiodiv"> 
     <fieldset data-role="controlgroup" id="rgroup1"> 
     </fieldset> 
    </div> --> 
    <h3>Dynamically created-Fieldset Refresh</h3> 
    <div id="radiodiv1"> 
     <fieldset data-role="controlgroup" id="rgroup2"> 
     </fieldset> 
    </div> 
    </div> 
</body>

修復了這個問題

來源

2011-10-31 10:22:35 user700284

還確保任何其他css聲明不覆蓋新應用的類。 – Alex

因爲你使用jQuery我會建議你使用

$（「＃收音機1 - 」 + I）.addClass（「類名」）

來源

2011-10-07 07:19:40 Ekim

然後，我必須編寫用於刪除不需要的類並添加所需的類的代碼。我在考慮jquery mobile應該自行處理它。 – user700284

我確信有一種方法，當我有更新背景的類似問題時，我花了好幾個小時，然後決定了幾行代碼不值得等待。我更擔心風格延遲生效，但很快就沒有任何延遲。希望你能找到你正在尋找的答案。 – Ekim

您需要刷新按鈕..

刷新單選按鈕

如果您通過JavaScript操作單選按鈕，則必須調用其刷新方法來更新視覺樣式。這裏有一個例子：

$("input[type='radio']").attr("checked",true).checkboxradio("refresh");

http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-radiobuttons.html

來源

2011-10-07 13:06:18 zyrex

這是爲了更新視覺風格，當你通過js編程式地選擇任何單選按鈕時。這裏我沒有通過js做任何選擇。反而試圖動態地創建單選按鈕。感謝花時間回答我的查詢。 – user700284

如果有人遇到這個問題，正確的方式來應用造型瓦特/當前ve rsion（1.4.5）是enhanceWithin

在一段代碼我寫，創建具有比特動態HTML後，我追加，然後應用樣式：

var currentAddressInput = new AddressInterface(); 
jQuery("#contentDiv").append(currentAddressInput.domElement).enhanceWithin();

來源

2016-11-08 17:41:41 HungryBeagle

樣式不能在動態創建的單選按鈕中正確應用

回答

相關問題