Question

我有一个多选的html元素。我想抓住resize事件，所以我可以存储最新的值。

<select multiple="multiple" class="ra-multiselect-collection" style="resize: vertical; margin-top: 0px; margin-bottom: 5px; height: 527px;"></select>

以下代码不起作用：

$('.ra-multiselect-collection').on( 'resize', function(){
    alert('resized');
});

有什么想法吗？

Answer 1

好吧，我不认为您可以将resize事件绑定到DOM元素，但请检查一下：

$("select").on("mouseup", function()
{
    var el = $(this);

    if (el.data("old-height") == null || el.data("old-height") != el.height())
    {
        alert("resized!");
    }

    el.data("old-height", el.height());
}).data("old-height", $("select").height());

Fiddle

我使用mouseup事件检查存储在data属性中的旧高度以及事件发生时的当前高度。如果它们不同，则会收到调整大小事件。不是一个漂亮的解决方法，但它似乎工作。

我无法在IE because it doesn't support that property和Firefox上进行测试，它运行良好，但似乎您可以双击调整大小的角落并返回初始大小，这并不会实际触发事件

在您的情况下，当您使用类来选择这些元素时，您可以这样做：

$(".ra-multiselect-collection").each(function()
{
    $(this).on("mouseup", function()
    {
        var el = $(this);

        if (el.data("old-height") == null || el.data("old-height") != el.height())
        {
            alert("resized!");
        }

        el.data("old-height", el.height());
    }).data("old-height", $(this).height());
});

未经测试但应该可以使用。

Answer 2

最后我使用了来自jQuery UI的可调整大小的函数

http://jqueryui.com/resizable/

这是我的代码：

  $('.ra-multiselect-collection').first().resizable({
    resize: function() {
      alert('resized');
    }
  });

也许.first()不是必需的

Answer 3

你这里没有resize事件，但你可以在mousedown事件上存储大小，并检查它是否在mouseup事件上发生了变化

在多个选择控件上调整事件大小

3 个答案: