0

HTML ページにHTML を追加する jQuery スクリプトを使用して<div>います。

btnAddObjをクリックすると、生成された HTML がobjGroupの ID で div に追加されます。

ボタンは機能しているように見えますが、生成された HTML が HTML のすべてのコンテンツの後ろに配置されているため、表示されません。

<div>生成された HTML が正しく挿入され、必要に応じて div の高さが大きくなるように正しく挿入する方法はありますか?

ありがとう

        <div class="span">
            <input type='button' value='Add Obj' id="btnAddObj">
                <div id="obj"  style="height: 100%;" data-courseid="<%=NCourse.ID%>">
                    <div id="objGroup" style="height: 100%;" runat="server" clientIdMode="Static"></div>
                </div>
        </div>

    var counter = 1;
    $("#btnAddObj").on("click" ,function () {

    var newTextBoxDiv = $("<div>").attr("id", 'obj' + counter);

    newTextBoxDiv.html(
        "<table><tr><td>" +
        "<label><img style='padding: 0; margin: 0;' src='./images/drag.png' /></label>" +
        "</td><td>" +
        "<textarea id='tbObj_" + counter + "' name='txtObj' class='obj' sequence='" + counter + "' rows='2' cols='30'></textarea>" +
        "</td>" +
        "<td><div class='removeObj'><label class='deleteLabel'>x</label></div></td></tr></table>");
    newTextBoxDiv.appendTo("#objGroup");

    counter++;

    });

Firebug で表示される出力のサンプルを次に示します。また、以下に表示される z-index のような奇妙な CSS は見当たりません。

<div class="span">
   <input id="btnAddObjective" type="button" value="Add Objective">
      <div id="objectives" data-courseid="15131046" style="height: 100%;">
         <div id="objectivesGroup" class="ui-sortable" style="height: 100%;">
            <div id="objective1">
               <table>
                   <tbody>
                       <tr>
                          <td>
                             <label>
                                 <img src="./images/drag.png" style="padding: 0;  margin: 0;">
                             </label>
                          </td>
                          <td>
                             <textarea id="tbObjective_1" class="objectives" cols="30" rows="2" sequence="1" name="txtObjective"></textarea>
                          </td>
                          <td>
                      </tr>
                </tbody>
          </table>
       </div>
  </div>
 </div>

4

1 に答える 1

1

ここで私のためにうまく働いています：http://jsfiddle.net/u3mYm/2/

要素を閉じて、あなた<input />の中に追加しました。また、JavaScript 内の HTML を少しクリーンアップしました (要素が数個しかない場合は、通常はお勧めできません)。何も見つかりませんでした。<tbody><table>

そうでない場合は、周囲の CSS または HTML に問題があると思われます。機能しない自己完結型の例を示していただけますか?

<div class="span">
    <input type='button' value='Add Obj' id="btnAddObj" />
    <div id="obj" style="height: 100%;" data-courseid="<%=NCourse.ID%>">
        <div id="objGroup" style="height: 100%;" runat="server" clientIdMode="Static">Foo</div>
    </div>
</div>

JavaScript:

var counter = 1;

$("#btnAddObj").on("click" ,function () {

    var newTextBoxDiv = $("<div>").attr("id", 'obj' + counter);

    newTextBoxDiv.html([
        "<table>",
          "<tbody>",
            "<tr>",
              "<td>",
                "<label><img style='padding: 0; margin: 0;' src='./images/drag.png' /></label>",
              "</td>",
              "<td>",
                "<textarea id='tbObj_", counter, "' name='txtObj' class='obj'",
                    "sequence='", counter, "' rows='2' cols='30'>",
                "</textarea>",
              "</td>",
              "<td>",
                "<div class='removeObj'><label class='deleteLabel'>x</label></div>",
              "</td>",
            "</tr>",
          "</tbody>",
        "</table>"].join(""));
    newTextBoxDiv.appendTo("#objGroup");

    counter++;
});
于 2013-07-29T16:06:20.103 に答える