jqueryまたはjsがeasyUI要素を動的に追加した場合のスタイルの失効の問題を解決

6852 ワード

今日プロジェクトをするとき、難題にぶつかった.easyUIのselectドロップダウンボックスをループして追加すると、スタイルが異なります.そこで、私はいくつかの方法を考えて、例えば直接書いて、しかしすべて隠して、クリックして追加する時、もう1行1行表示して(少し馬鹿です)、しかしドロップダウンボックスはスタイルを保証して、しかし別のスタイルは間違っています.そこで、HTMLで最終的に生成された要素をコピーして追加してみると、ドロップダウンボタンが機能しないことに気づきました.最後に、公式ドキュメントを見て、$を見つけました.parser.parse(); この方法はページ全体を再レンダリングすることができ、レンダリングが完了するとeasyuiの元のスタイルが表示されます.HTML:
 <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”);は、ある要素を再レンダリングするポインタです.