使用listChanged参数

Question

我正在使用jQuery UI插件fieldchooser，我想知道什么时候列表发生了变化，这样我就可以在数据库中更新它。这个插件有一个listChanged函数，但我不确定它是如何工作的。我完成了这个例子：

    <script>
        $(document).ready(function () {
            var $sourceFields = $("#sourceFields");
            var $destinationFields = $("#destinationFields");
            var $chooser = $("#fieldChooser").fieldChooser(sourceFields, destinationFields);
        });
    </script>

    <div id="fieldChooser" tabIndex="1">
        <div id="sourceFields">
            <div>First name</div>
            <div>Last name</div>
            <div>Home</div>
            <div>Work</div>
            <div>Direct</div>
            <div>Cell</div>
            <div>Fax</div>
            <div>Work email</div>
            <div>Personal email</div>
            <div>Website</div>
        </div>
        <div id="destinationFields">
        </div>
    </div>

在堆栈溢出的其他地方，我发现了这个例子：

    $chooser.on("listChanged",function(event,selection,list){
    //event <- The jQuery event invoking the callback.
    //selection <- The field (or set of fields) which has moved.
    //list <- The field list to which the selection has moved.
    alert("listChanged");
    }

并尝试过这个，但没有成功：

$chooser.on("listChanged",function(mouseup,sourceFields,destinationFields){

alert("listChanged");
});

如果你能给我一些建议，我将不胜感激。谢谢。

Answer 1

有了正确的代码，这将按预期工作。

工作示例：https://jsfiddle.net/Twisty/v2Lrm9wq/2/

JavaScript

$(function() {
  var $chooser = $("#fieldChooser").fieldChooser();
  var $sourceFields = $("#sourceFields").children();
  $chooser.getSourceList().add($sourceFields);
  $chooser.on("listChanged", function(event, selection, list) {
    alert("listChanged");
  });
});