1

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.

Chris Spittles
  • 15,023
  • 10
  • 61
  • 85
  • possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – emerson.marini Jul 20 '15 at 09:01
  • possible duplicate of [In jQuery, how to attach events to dynamic html elements?](http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements) – emerson.marini Jul 20 '15 at 09:02
  • possible duplicate of [Jquery how to bind click event on dynamically created elements?](http://stackoverflow.com/questions/17558167/jquery-how-to-bind-click-event-on-dynamically-created-elements) – emerson.marini Jul 20 '15 at 09:03
  • 1
    @MelanciaUK I can't see how these are the same? I'm asking how you could delegate a resizable widget which isn't an event? – Chris Spittles Jul 20 '15 at 09:44

3 Answers3

2

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>
Bhavin Solanki
  • 4,740
  • 3
  • 26
  • 46
1

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>
Rajshekar Reddy
  • 18,647
  • 3
  • 40
  • 59
0

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

    });

});
Rami
  • 73
  • 1
  • 7