Question

我正在使用jQuery脚本将HTML添加到我的HTML页面中的<div>。

当我点击 btnAddObj 时会发生什么，它会将生成的HTML添加到ID为 objGroup 的div中。

该按钮似乎有效，但它将生成的HTML放在HTML上的所有内容后面，以便我无法看到它。

有没有办法正确插入它，以便生成的HTML进入正确的<div>并导致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>

Answer 1

在这里工作得很好：http://jsfiddle.net/u3mYm/2/

我关闭了<input />元素并在<tbody>内添加了<table>。另外，我在你的JavaScript中清理了一些HTML（如果你不仅仅是一些元素，通常不是一个好主意）。找不到任何东西。

如果不是这样，我怀疑周围的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++;
});

将jQuery生成的动态HTML添加到HTML页面

1 个答案: