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

您所在的位置:网站首页 jqueryon事件委托 jQuery上的事件委托可调整大小

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

#jQuery上的事件委托可调整大小 | 来源: 网络整理| 查看: 265

请考虑以下几点。

jQuery(function($) { function makeResize(target) { return $(target).resizable(); } makeResize(".resizable"); $("button").click(function() { var c = ($(".resizable").length + 1) var newBox = $("", { id: "resize-" + c, class: "ui-widget-content resizable" }).css({ width: "150px", height: "100px" }).appendTo("#size-region"); $("", { 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; } Resize 1 Click me

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('Not Resizable'); makeResize("#2"); });

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3