jQuery上的事件委托可调整大小

dzjeubhm 于 2023-02-18 发布在 jQuery

关注(0)|答案(1)|浏览(108)

我的问题比这个例子更大，但是我已经编写了一个展示相同行为的示例测试。
问题是，如何在动态添加一个元素到页面后附加/重新附加resizable事件。我意识到这可以通过类似$('.table1').on('click', 'tr', function() {alert("clicked!");});的点击事件来完成，当一个新的tr被添加到表中并被点击时，$('.table1').on('click', 'tr', function() {alert("clicked!");});会显示警报，这使用了事件委托。然而使用jQuery Resizable的示例似乎并没有满足这个要求，那么如何才能做到呢？
下面是我的测试用例（为简单起见，这是一个单独的测试文件）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Event Delegation Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
    <style>
        #resizable { width: 150px; height: 150px; padding: 0.5em; }
        #resizable h3 { text-align: center; margin: 0; }
    </style>

    <script src="//code.jquery.com/jquery-3.6.0.js"></script>
    <script src="//code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
    <script>
        jQuery(document).ready( function($) {
            $( function() {
                $( ".resizable" ).resizable();// <--- How to add a delegated event on this?
            } );

            $( "button" ).click( function () {
                $( "#size-region" ).append('<div id="2" style="width:150px; height: 100px;" class="ui-widget-content resizable"><h3 class="ui-widget-header">Not Resizable</h3></div>');
            } );
        } );
    </script>
</head>
<body>
    <div id="size-region" class="height: 90%; width: 100%;">
        <div id="1" style="width:150px; height: 100px;" class="ui-widget-content resizable">
            <h3 class="ui-widget-header">Resizable</h3>
        </div>
    </div>
    <button>Click me</button>
</body>
</html>

jQuery可调整大小的文档为https://jqueryui.com/resizable/
有关事件委派的信息，请访问https://learn.jquery.com/events/event-delegation/
我提到的问题是更大的，我相信我可以用javascript来添加元素，但是如果我有10个其他的事件要添加呢？我特别寻找一个方法，在那里我可以添加一个js文件，并使用这个添加到大小区域的任何东西（如果这实际上是可能的）

jquery

来源：https://stackoverflow.com/questions/75387899/event-delegation-on-jquery-resizable

1条答案

按热度按时间

xqk2d5yq1#

请考虑以下几点。

jQuery(function($) {
  function makeResize(target) {
    return $(target).resizable();
  }

  makeResize(".resizable");

  $("button").click(function() {
    var c = ($(".resizable").length + 1)
    var newBox = $("<div>", {
      id: "resize-" + c,
      class: "ui-widget-content resizable"
    }).css({
      width: "150px",
      height: "100px"
    }).appendTo("#size-region");
    $("<h3>", {
      class: "ui-widget-header"
    }).html("Resize " + c).appendTo(newBox);
    makeResize(newBox);
  });
});

#resizable {
  width: 150px;
  height: 150px;
  padding: 0.5em;
}

#resizable h3 {
  text-align: center;
  margin: 0;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.js"></script>
<script src="//code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

<div id="size-region" class="height: 90%; width: 100%;">
  <div id="resize-1" style="width:150px; height: 100px;" class="ui-widget-content resizable">
    <h3 class="ui-widget-header">Resize 1</h3>
  </div>
</div>
<button>Click me</button>

jQuery UI Widget的初始化不能像Event那样委托，如果你想用相同的参数初始化大量的元素，你可以用Function来完成。
看一下makeResize()函数，我传入一个变量target，然后将其 Package 为jQuery对象，然后初始化Resizable。这种技术非常通用，因为我可以传入一个String、一个元素或一个对象，它将工作。
示例：

$("button").click(function(){
  makeResize(this);
});

使单击的按钮可调整大小。

$(document).on("click", "button", function(){
  makeResize(this);
});

将单击事件委托给可能创建的任何按钮，并使其可调整大小。
我使用了更纯粹的jQuery，这是我的选择，这并不意味着你的代码，附加一个HTML字符串，在任何方面都是错误的。两种不同的方法。我更喜欢我的方法，因为它更容易读下来的行，更容易操纵或作出小的变化/修复，更容易使更多的动态。
您的原始代码可以类似的方式工作：

$("button").click(function() {
  $("#size-region").append('<div id="2" style="width:150px; height: 100px;" class="ui-widget-content resizable"><h3 class="ui-widget-header">Not Resizable</h3></div>');
  makeResize("#2");
});

由于新的HTML字符串已添加到DOM中，并且已呈现，因此我们可以通过选择器"#2"调用它。
这里的陷阱是，如果您第二次或第三次单击该按钮，那么当需要使多个元素具有唯一ID时，它们就会具有相同的ID。
最后要注意的是，您不需要将jQuery Package 在多个Ready或Anonymous函数中，您需要在执行jQuery之前让所有HTML Load并处于Ready状态，这就是$(document).ready(function(){});和$(function(){});为您所做的。

赞(0）回复(0）举报 2023-02-18

我来回答

jQuery上的事件委托可调整大小

1条答案

相关问题

热门标签

最新问答