jqueryまたはjsがeasyUI要素を動的に追加した場合のスタイルの失効の問題を解決
6852 ワード
今日プロジェクトをするとき、難題にぶつかった.easyUIのselectドロップダウンボックスをループして追加すると、スタイルが異なります.そこで、私はいくつかの方法を考えて、例えば直接書いて、しかしすべて隠して、クリックして追加する時、もう1行1行表示して(少し馬鹿です)、しかしドロップダウンボックスはスタイルを保証して、しかし別のスタイルは間違っています.そこで、HTMLで最終的に生成された要素をコピーして追加してみると、ドロップダウンボタンが機能しないことに気づきました.最後に、公式ドキュメントを見て、$を見つけました.parser.parse(); この方法はページ全体を再レンダリングすることができ、レンダリングが完了するとeasyuiの元のスタイルが表示されます.HTML:
js:
$.parser.parse(“#tabAllowance”);は、ある要素を再レンダリングするポインタです.
<tr id="trAllowance1">
<td><select class="easyui-combobox" name="language" style="width:152px;" id="txtAllowance1">select>
td>
<td><input type="text" id="txtThirdAmount1" class="inputText" />td>
<td><input type="text" id="txtThirdSoNo1" class="inputText" />td>
<td><input type="text" id="txtThirdProject1" class="inputText" />td>
<td><input type="text" id="txtThirdDescription1" class="inputText" />td>tr>
js:
var trId = $("#tabAllowance").find("tr").last().attr("id");
trId = trId.substring(trId.length - 1, trId.length);
trId = parseInt(trId) + 1;
var trHTML = "<tr id='trAllowance" + trId + "'><td><select class=\"easyui-combobox\" name=\"language\" style=\"width:152px;\" id=\"txtAllowance" + trId + "\">select>td>";
trHTML = trHTML + "<td><input type='text' id='txtThirdAmount" + trId + "' class='inputText' />td><td><input type='text' id='txtThirdSoNo" + trId + "' class='inputText' />td><td><input type='text' id='txtThirdProject" + trId + "' class='inputText' />td><td><input type='text' id='txtThirdDescription" + trId + "' class='inputText' />td>tr>";
$("#tabAllowance").append(trHTML);
$.parser.parse("#tabAllowance");
$.parser.parse(“#tabAllowance”);は、ある要素を再レンダリングするポインタです.