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>

EDIT: I am not asking about event delegation, I'm asking if there is a way to delegate the resizable widget to dynamically add it to newly created elements.

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>

Answer 2

I know this is a old post, But still I felt I could post a better answer for future reference, Since in your comments you had mentioned about code reuse and not applying the plugin to elements multiple times this solution should overcome those issues.

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

Answer 3

Try this code it's working for me

$("#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!");
    }

    });

});