Question

通过使用Django处理项目，我的前端遇到了问题。我已经做了一个非常简单的Bootstrap网格，并在jQuery中插入了这些黄色的块，这些块应该可以拖动和调整大小（为此使用了jQuery UI Widgets） see this image

我的jQuery代码（可能有点混乱；））：

$(document).ready(function () {
    var eventCollum = document.createElement("div");    // Create with DOM
    $(".employerMainRow").append(eventCollum)
    .css({ "background-color": "yellow", "height": "45px", "width": "40%", "margin-left":"40%"})
    .attr("class", "eventCol");
    $(".eventCol").resizable().resizable({ maxHeight: "45", containment: "parent",   // Handles left right and bottom right corner
    handles: 'e, w',
    // Remove height style
    resize: function(event, ui) {
        $(this).css("height", '');}
}).draggable().draggable({
  axis: "x"
     });
  });

还有我从模板中获得的相关HTML：

<div class="container-fluid">
   <h1 style="padding: 5px"> Arbeitsplanner: </h1>
    <div class="row">
      <div class="col-lg-2" style="border: double" > 
      <!--....some other grid content....-->
       </div>

      <!-- Main planner-table wrapper (right):-->
      <div class="col-lg-10" style="border: double">
           <!-- Header dates:-->
        <div style="background-color: grey; border: double"                                                                                                      id="mainContentWrapper" class="row">
        {% for collumDate in viewedDateCollums %}
        <div style="width: 20%; border: double" class="col-lg-2"><strong>{{collumDate}}</strong></div> 
        {%endfor%}
       </div>
          <!-- Main planner - main collumview: -->
      {% for employer in employers %}
       <div class="row employerMainRow" style="min-height: 45px; border: double; background-color: transparent; padding-right: 0px">

       </div>
       {%endfor%} 


          </div>
       </div>
    </div>

我通过jQuery阻止了可以在垂直方向（通过手柄）调整yellow-div的大小。这行得通，您无法朝该方向调整大小。但是现在，鼠标悬停在黄色div的底角时，仍然显示调整大小的鼠标指针。使用此方法的真正奇怪的效果是，通过尝试在垂直方向上调整大小，我创建的Bootstrap网格的行之一消失了。该行的黄色div移到另一行。

(see the result also in this image)

我不知道为什么会发生这种情况，并使用jQuery UI提供的属性尝试了几件事，但它没有任何改变。

我的代码中是否存在某些根本导致错误的事情？有什么可以防止的吗？

希望问题/想法很明确。（我想提供一个演示站点，但是使用django时有些棘手，当它仍然在线时，可能是：https://rothe-plana-sv8930.c9users.io/）

编辑：我认为我可以稍微缩小基本问题的范围。使用jQuery代码运行模板时，我发现(source-code view of firefox)的jQuery UI只是通过加载页面本身删除了我从头开始创建的row-div。（尚未调整大小）。请注意，我不得不将黄色的eventCol放入这些“行”元素中，因此根据我在jQuery中插入内容的位置，父元素似乎已被完全删除。

这是否有普遍原因？

为什么jQuery为什么通过在jQuery中插入新的<div> -elements来删除父<div> -elements？

0 个答案: