将 jQueryUI Resizable 小部件应用于动态创建的元素

Question

这个问题不是关于事件委托的

我想将 jQuery 可调整大小的小部件应用于一系列可能动态创建的 div 标签。

有没有一种方法可以使用行为的东西，比如事件委托来动态地将 jQuery resizable 小部件添加到新元素？

示例如下（注意新创建的绿色元素如何无法调整大小）：

$(function() {
  var cols = $("#cols").children(".col");

  cols.resizable({
    maxHeight: 20,
    minHeight: 20,
    distance: 5,
    handles: 'e',
    start: function() {
      console.log("I've started!");
    },
    stop: function() {
      console.log("I've stopped!");
    }
  });

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

    cols.filter(":last").after('<div class="col new">' + parseInt(cols.length + 1) + '</div>');

    cols = $("#cols").children(".col");

  });
});

.col {
  float: left;
  width: 20px;
  height: 20px;
  background: #f00;
  margin-right: 1px;
}
.col.new {
  background: #0f0;
}
button {
  clear: left;
  display: block;
  margin-top: 10px;
}

<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="cols">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
</div>
<button id="addNew">Add</button>

编辑：我不是在问事件委托，我是在问是否有办法将可调整大小的小部件委托给将其动态添加到新创建的元素中。

Answer 1

添加新元素后，您需要重新初始化 col.resizable();。请检查以下工作代码：

$(function() {
  var cols = $(".col");


  cols.resizable({
    maxHeight: 20,
    minHeight: 20,
    distance: 5,
    handles: 'e',
    start: function() {
      console.log("I've started!");
    },
    stop: function() {
      console.log("I've stopped!");
    }


  });


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

    cols.filter(":last").after('<div class="col new">' + parseInt(cols.length + 1) + '</div>');
    
    cols = $(".col");
    cols.resizable({maxHeight: 20,
    minHeight: 20,
    distance: 5,
    handles: 'e'});

  });

});

.col {
  float: left;
  width: 20px;
  height: 20px;
  background: #f00;
  margin-right: 1px;
}
.col.new {
  background: #0f0;
}
button {
  clear: left;
  display: block;
  margin-top: 10px;
}

<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div id="cols">

  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>

</div>
<button id="addNew">Add</button>

Answer 2

试试这个对我有用的代码

$("#cols").on('mouseenter',cols,function(){
    cols.resizable({
    maxHeight: 20,
    minHeight: 20,
    distance: 5,
    handles: 'e',
    start: function() {
       console.log("I've started!");
    },
    stop: function() {
       console.log("I've stopped!");
    }

    });

});

Answer 3

我知道这是一个旧的 post，但我仍然觉得我可以 post 一个更好的答案以供将来参考，因为在您的评论中您提到了代码重用和不应用插件对于元素多次，此解决方案应该可以解决这些问题。

$(function() {
 
  ApplyResizablePluginToCol($(".col"));  // cal the function by passing all the elements to which the plugin must be applied to

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

    $(".col:last").after('<div class="col new">' + parseInt( $(".col").length + 1) + '</div>');       
    ApplyResizablePluginToCol($(".col:last"));// take the last element, ie the element that is created just now

  });

  function ApplyResizablePluginToCol(elements){ //reusable function
    
    elements.resizable({
     maxHeight: 20,
     minHeight: 20,
     distance: 5,
     handles: 'e',
     start: function() {
       console.log("I've started!");
     },
     stop: function() {
       console.log("I've stopped!");
     }
   });
 }  
  
});

.col {
  float: left;
  width: 20px;
  height: 20px;
  background: #f00;
  margin-right: 1px;
}
.col.new {
  background: #0f0;
}
button {
  clear: left;
  display: block;
  margin-top: 10px;
}

<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div id="cols">

  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>

</div>
<button id="addNew">Add</button>

将 jQueryUI Resizable 小部件应用于动态创建的元素

Apply jQueryUI Resizable widget to dynamically created elements

jquery

jquery-ui

jquery-ui-resizable

这个问题不是关于事件委托的