Apply jQueryUI Resizable widget to dynamically created elements

前端 未结 3 1728
忘了有多久
忘了有多久 2020-12-22 00:45

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 create

相关标签:
3条回答
  • 2020-12-22 01:09

    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>

    0 讨论(0)
  • 2020-12-22 01:09

    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>

    0 讨论(0)
  • 2020-12-22 01:11

    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!");
        }
    
        });
    
    });
    
    0 讨论(0)
提交回复
热议问题