jQuery UI Multiselect Next - onChange - 全部删除，全部添加

Question

我有 jQuery UI Multiselect Next http://quasipartikel.at/multiselect_next 我想在选择发生任何变化时触发一个事件。

这个例子有效：

<script type="text/javascript">

$(function(){
$("#countries").multiselect();          
$('#countries').multiselect({ selected: function(event, ui) {change(); } });
$('#countries').multiselect({ deselected: function(event, ui) {change(); } });
});         

function change(){
alert('CHANGE');
}

</script>

当我从列表中移动一个元素时，函数 change() 被调用。 主要问题是当我按“全部删除”或“全部添加”时，因为该函数被多次调用（元素数量）。

当我按下“全部删除”或“全部添加”时，是否可以只调用一次函数change()？

谢谢。

Answer 1

我找到了解决办法：

打开 ui.multiselect.js

在 selectAll 函数中添加以下行：

this.element.trigger('change');

在 selectNone 函数中添加以下行{

this.element.trigger('change');

添加以下行停止功能

that.element.trigger('change');

HTML：

<script type="text/javascript">
    $(function(){       
        $("#countries").multiselect();          
        $('#countries').bind('change', function() {alert('Change'); });
        });
</script>

Answer 2

我不确定。但你试试jquery.one()

$("#foo").one("click", function() {
  alert("This will be displayed only once.");
});

Answer 3

您可以使用某种计时方案来过滤掉额外的调用。让我们假设一个真实的人每 100 毫秒不能多次触发选中或取消选中的事件。您可以执行以下操作：

var lastChange = 0;

function change() {

  //get current date, then the number of milliseconds since 1/1/1970
  var curr_date = new Date();
  var n = cur_date.getTime();

  //compute the difference.
  var diff = n - lastChange;

  //update our last change variable.
  lastChange = n;

  //if we're within 100 milliseconds of the last call, ignore.
  if (diff < 100)
     return;

  //proceed as normal.
  alert('change!');
}

您可以调整这样的算法以满足您的需求，我以 100 毫秒为例。我不确定是否有更简洁的方法来执行此操作，因为您基本上是在尝试过滤来自 UI 控件本身的事件。