0

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

应该发生的是，当我单击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>

4

1 回答 1

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++;
});
于 2013-07-29T16:06:20.103 回答