javascript - 在循环内时，我的 jQuery 函数不会应用于元素

Question

维度数组 -

var dimensions = [
{
    "x": 0,
    "y": 0,
    "width": 680,
    "height": 294.75
},
{
    "x": 680,
    "y": 0,
    "width": 680,
    "height": 294.75
},
{
    "x": 0,
    "y": 294.75,
    "width": 680,
    "height": 294.75
},
{
    "x": 680,
    "y": 294.75,
    "width": 680,
    "height": 294.75
}
] 

创建窗口的窗口属性函数

function windowProperties(containment, x, y, width, height) { //New Window Style and jQuery Functions

  $(containment).append('<div id="window' + divCount + '"><p id="windowName' + divCount + '"></p><p id="para' + divCount + '">Source</p></div>');
  nWindow = document.getElementById('window' + divCount);
  paragraph = document.getElementById('para' + divCount);
  windowName = document.getElementById('windowName' + divCount)

  paragraph.style.color = "black";
  paragraph.style.fontSize = "20px";
  paragraph.style.fontWeight = "bold";
  paragraph.style.padding = "20px";
  paragraph.style.textAlign = "center";

  windowName.style.color = "black";
  windowName.style.fontSize = "20px";
  windowName.style.fontWeight = "bold";
  windowName.style.padding = "10px";
  windowName.style.textAlign = "center";
  windowName.innerHTML = 'Window ' + divCount;

  nWindow.style.width = width + "px"; //680
  nWindow.style.position = "absolute";
  nWindow.style.height = height + "px"; //294.75
  nWindow.style.opacity = "0.5";
  nWindow.style.background = "white";
  nWindow.style.zIndex = "200";
  nWindow.style.top = y + "px";
  nWindow.style.left = x + "px";

  $(function() {

    $.fn.getPosition = function() {
      var results = $(this).position();
      results.right = results.left + $(this).width();
      results.bottom = results.top + $(this).height();
      return results;
    }

    $(nWindow).resizable({
      maxWidth: 1356,
      maxHeight: 585.5,
      grid: [3, 4],
      aspectRatio: true,
    });

    $(nWindow).draggable({
      cursor: "move",
      snapTolerance: '20',
      snap: nWindow,
      containment: '.videoWallContainer',
      stop: function(e, ui) {
        console.log($(this).attr("id"), $(this).getPosition());

      }

    });

    $(sources).draggable({
      cursor: "pointer",
      helper: "clone",
      appendTo: nWindow,

    });

    $(nWindow).droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      accept: sources,
      drop: function(event, ui) {
        $(paragraph).text(ui.draggable.text()).appendTo(nWindow);
        console.log(nWindow);
      }
    });
  });
}

一次创建所有元素

var createAllWindows = document.getElementById('createAllWindows').onclick = function() { //All window creation button
  var i = 0;
  while (i < dimensions.length) {
    dimensions.forEach(function(size) {
      i++;
      console.log("Window " + i);
      console.log(size.x);
      console.log(size.y);
      console.log(size.width);
      console.log(size.height);
      windowProperties(container, size.x, size.y, size.width, size.height); //Calling function
      divCount++;
    });
  }
};

当在数组的各个位置创建窗口时，循环会创建它们，但不会将 jQuery 函数应用于窗口，即使它位于被调用函数内。我做错了什么吗？

标签： javascriptjquery