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

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

我知道这是一篇很老的帖子，但我觉得我可以发布一个更好的答案供将来参考，因为在你的评论中你提到过代码重用而不是多次将插件应用于元素这个解决方案应该克服这些问题。

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

试试这个为我工作的代码

{"review/profileName": "Carleen M. Amadio \"Lady Dragonfly\"", "product/price": "unknown", "review/time": "1314057600", "product/productId": "B000GKXY4S", "review/helpfulness": "2/2", "review/summary": "Fun for adults too!", "review/userId": "A1QA985ULVCQOB", "product/title": "Crazy Shape Scissor Set", "review/score": "5.0", "review/text": "I really enjoy these scissors for my inspiration books that I am making (like collage, but in books) and using these different textures these give is just wonderful, makes a great statement with the pictures and sayings. Want more, perfect for any need you have even for gifts as well. Pretty cool!"}{"review/profileName": "Barbara", "product/price": "unknown", "review/time": "1328659200", "product/productId": "B000GKXY4S", "review/helpfulness": "0/0", "review/summary": "Making the cut!", "review/userId": "ALCX2ELNHLQA7", "product/title": "Crazy Shape Scissor Set", "review/score": "5.0", "review/text": "Looked all over in art supply and other stores for \"crazy cutting\" scissors for my 4-year old grandson. These are exactly what I was looking for - fun, very well made, metal rather than plastic blades (so they actually do a good job of cutting paper), safe (\"blunt\") ends, etc. (These really are for age 4 and up, not younger.) Very high quality. Very pleased with the product."}{"review/profileName": "L. Heminway", "product/price": "unknown", "review/time": "1156636800", "product/productId": "B000140KIW", "review/helpfulness": "1/1", "review/summary": "Fiskars Softouch Multi-Purpose Scissors, 10\"", "review/userId": "A2M2M4R1KG5WOL", "product/title": "Fiskars Softouch Multi-Purpose Scissors 10\"", "review/score": "5.0", "review/text": "These are the BEST scissors I have ever owned. I am left-handed and take note that either a left or right-handed person can use these equally well.If you have arthritis, as I do, these scissors are amazing as well. Well worth the price. I now own three pairs of these and have convinced many other people in my quilting group that they NEED a pair as well!They cut through muli layers and difficult to cut items really well.Do buy them, you won't regret it!"}{"review/profileName": "R. GARCIA", "product/price": "unknown", "review/time": "1214784000", "product/productId": "B000140KIW", "review/helpfulness": "0/0", "review/summary": "Best scissors ever", "review/userId": "ARQAQ6ZYMFPCA", "product/title": "Fiskars Softouch Multi-Purpose Scissors 10\"", "review/score": "5.0", "review/text": "This Fiskars Scissors are the best i've bougth in time. It are excellent for delicated fabrics and silck ribbon embroidery, also work perfectly with paper."}{"review/profileName": "Dea Carey \"deacarey\"", "product/price": "unknown", "review/time": "1173484800", "product/productId": "B000140KIW", "review/helpfulness": "0/0", "review/summary": "A great tool to make your work easier", "review/userId": "A3FPG4LAJ1HOHZ", "product/title": "Fiskars Softouch Multi-Purpose Scissors 10\"", "review/score": "5.0", "review/text": "I finally gave in and bought these after years of wanting them. I'm so glad I did!I'm a book artist and crafter, and I usually do my creative work in marathon stretches. (You know, nothing for three weeks and then an all-day session...) These scissors make it so much easier. They cut easily and cleanly, with no hand fatigue. They also saved me when I did all my Christmas gift wrapping.I should have just bought these in the first place!"}

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

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

3 个答案: