jquery - Apply jQueryUI Resizable widget to dynamically created elements

Question

This question is not about event delegation

I would like to apply the jQuery resizable widget to a series of div tags that could potentially be created dynamically.

Is there a way to use something that behaves like event delegation to dynamically add the jQuery resizable widget to new elements?

Here's the example (notice how the newly created green elements cannot be resized):

$(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

You need to reinitialize col.resizable(); once new element added. Please check below working code:

$(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>